This Repository is designed as a comprehensive learning hub for modern web development, covering both JavaScript and TypeScript along with their practical applications in frameworks and libraries. Its structure reflects a progression from fundamentals to advanced topics, making it suitable for learners who want to build a strong foundation and then move into real-world projects.
| JavaScript | TypeScript | React.js |
|---|---|---|
 |
 |
 |
| Next.js | Node.js | Express.js |
|---|---|---|
 |
 |
 |
- ℹ️ About This Repository
- 📁 Directory Structure
- 🖼️ Featured Projects
- 🛠️ Technologies & Tools
- 🚀 How to Set Up
- 🤝 Contributing
- 📜 Conclusion
One stop to master JavaScript, TypeScript, React, Next.js, Node.js, Express.js – with real-world projects and progressive tutorials.
This repository is a complete learning path for modern web development. It contains:
- Step-by-step JavaScript tutorials (from basics to advanced concepts like OOP, fetch APIs, DOM manipulation).
- TypeScript setup and examples.
- Backend development with Node.js, Express.js, MongoDB, and authentication (OAuth).
- Frontend frameworks – React (hooks, context, router, Redux) and Next.js (App Router, API routes, SSR/SSG/ISR, middleware).
- Full‑stack applications – 5 polished web apps (BitBreaks, GetMeAProteinShake, LinkRoot, PassDot, uTask) with screenshots.
Whether you're a beginner or an experienced developer looking to solidify your skills, this repo provides clean, well‑documented code and practical projects.
JavaScript-and-TypeScript-Learning/
│
├── Atomic Projects/ # Full‑stack applications (showcase)
│ ├── BitBreaks-WebApp/ # URL shortener (Next.js + MongoDB)
│ ├── GetMeAProteinShake-WebApp/ # Crowdfunding platform (NextAuth + Razorpay)
│ ├── LinkRoot-WebApp/ # “Link in bio” tool (Next.js + MongoDB)
│ ├── PassDot-WebApp/ # Password manager (React + localStorage)
│ └── uTask-WebApp/ # Todo app (React + localStorage)
│
├── Demonstration/ # Screenshots of the above projects
│ ├── BitBreaks-MainPage.png
│ ├── BitBreaks-URLShortenInputPage.png
│ ├── BitBreaks-URLShortenSuccessPage.png
│ ├── BitBreaks-URLTestingPage.png
│ ├── GetMeAProteinShake-DashboardPage.png
│ ├── GetMeAProteinShake-GoogleOAuth2.0.png
│ ├── GetMeAProteinShake-LoginPage.png
│ ├── GetMeAProteinShake-LowerMainPage.png
│ ├── GetMeAProteinShake-OfficialUserPage.png
│ ├── GetMeAProteinShake-RazorPayPage.png
│ ├── GetMeAProteinShake-UpperMainPage.png
│ ├── LinkRoot-HandleCreation.png
│ ├── LinkRoot-MainPage.png
│ ├── LinkRoot-OfficialHandlePage.png
│ ├── PassDot-InputDetails.png
│ ├── PassDot-OutputDetails.png
│ └── uTask-FullPage.png
│
├── JavaScript Tutorials/ # Hands‑on JS lessons (code + small projects)
│ ├── Imgs/ # Assets used in tutorials
│ ├── 0)_Boilerplate_Index_Testing.html
│ ├── 1)_Variables_and_DataTypes.js
│ ├── 2)_Operators_and_Conditional_Statements.js
│ ├── 3)_Loops_and_Strings.js
│ ├── 4)_Arrays_and_Objects.js
│ ├── 5)_Functions_and_Methods.js
│ ├── 6)_Document_Object_Model.{css,html,js}
│ ├── 7)_Events_and_Event_Objects.{css,html,js}
│ ├── 8)_Tic_Tac_Toe.{css,html,js}
│ ├── 9)_Rock_Paper_Scissor.{css,html,js}
│ ├── 10)_Object_Oriented_Programming_and_Error_Handling.{js,ts}
│ ├── 11)_Execution_Patterns_and_Order.js
│ ├── 12)_Fetch_APIs_and_Formats.js
│ ├── 13)_Currency_Converter.{css,html,js} (two versions)
│ └── 14)_Site_Files_Extractor_HTML_CSS_JS.js
│
├── NodeJS and ExpressJS Tutorials/
│ ├── 1)_CommonJS_vs_EcmaScript_[ES]/
│ ├── 2)_FS_and_Module/
│ ├── 3)_ExpressJS_Module_Basics/
│ ├── 4)_Express_Response_Requests_Router/
│ ├── 5)_Express_Middlewares_and_It's_types/
│ ├── 6)_Embedded_JavaScript_(ejs)/
│ └── 7)_MongoDB_Connection/
│
├── OAuth Setup/
│ ├── auth-server/ # OAuth2.0 authorization server
│ ├── client-app/ # Client that consumes OAuth
│ ├── resource-server/ # Protected resources API
│ └── git/ # Additional configs
│
├── ReactJS and NextJS Tutorials/
│ ├── 1)_ReactJS_Components_Props_JSX
│ ├── 2)_React_Hooks_and_State
│ ├── 3)_React_useEffect
│ ├── 4)_React_useRef
│ ├── 5)_React_Rendering
│ ├── 6)_React_Events
│ ├── 7)_React_Router
│ ├── 8)_React_useContext
│ ├── 9)_React_useMemo
│ ├── 10)_React_useCallback
│ ├── 11)_React_and_Express
│ ├── 12)_React_and_Redux
│ ├── 13)_NextJS_Server_Components_Static_Objects
│ ├── 14)_Next_API_Routes
│ ├── 15)_Next_Server_and_Client_Actions
│ ├── 16)_Next_Middleware
│ ├── 17)_Next_OAuth
│ ├── 18)_Next_Dynamic_Routes_and_Error_Handling
│ ├── 19)_Next_Global_and_Nested_Layouts
│ ├── 20)_Next_Navigation
│ ├── 21)_Next_SSR_SSG_ISR
│ ├── 22)_Next_Environment_Variables
│ └── 23)_Next_Style_JSX
│
├── TypeScript Tutorials/
│ ├── dist/ # Compiled output
│ ├── src/ # TypeScript source files
│ ├── package-lock.json
│ ├── package.json
│ └── tsconfig.json
│
├── README.md (This File)
|
└── .gitignore
Below are the five real‑world applications built during this learning journey. Each project tackles a different domain and technology stack.
A lightning‑fast URL shortener built with Next.js, MongoDB, and Tailwind CSS.
Features: custom short codes, copy to clipboard, redirect tracking, modern dark/cyan theme.
 Main Page |
 Shorten Input |
 Success |
 Testing |
A creator funding platform where fans buy a “protein shake” (supports creators).
Tech: Next.js, NextAuth (Google OAuth), Razorpay payment gateway, MongoDB.
 Upper Landing Page |
 Dashboard Page |
 Lower Landing Page |
 Official User Page |
 OAuth Integration |
 Razorpay Integration |
Create a personal page with all your important links – similar to LinkTree.
Tech: Next.js, MongoDB, dynamic routing.
 Main Page |
 Handle Creation |
 Official Handle Page |
|
A secure (client‑side) password manager with add/edit/delete and copy to clipboard.
Tech: React, localStorage, UUID.
 Input Details |
 Saved Output |
Classic todo application with local storage persistence.
Tech: React, Tailwind CSS.
 uTask Full Page |
| Category | Technologies |
|---|---|
| Languages | JavaScript (ES6+), TypeScript |
| Frontend | React (Hooks, Context, Router, Redux), Next.js (App Router, SSR/SSG/ISR, API Routes, Middleware) |
| Backend | Node.js, Express.js, MongoDB, Mongoose |
| Authentication | NextAuth.js (OAuth2.0 – Google, GitHub), Custom JWT |
| Payments | Razorpay |
| Styling | Tailwind CSS, CSS Modules, Vanilla CSS |
| State Management | React useState/useReducer, Context API, Redux |
| Dev Tools | ESLint, Prettier, Git, NPM, PNPM, Bun, Yarn |
- Clone the repo and navigate to
JavaScript Tutorials/. - Open
0)_Boilerplate_Index_Testing.htmlin a browser. - Run JavaScript files using Node.js:
node filename.js(e.g.,node 1)_Variables_and_DataTypes.js). - For DOM/event examples, open the corresponding
.htmlfile.
cd TypeScript\ Tutorials/
npm install
# Write code in src/ then compile
npx tsc
# Run compiled output from dist/
node dist/yourfile.jscd "NodeJS and ExpressJS Tutorials/1)_CommonJS_vs_EcmaScript_[ES]/"
npm install
node index.js # or nodemoncd "NodeJS and ExpressJS Tutorials/3)_ExpressJS_Module_Basics/"
npm install
node index.js # or nodemoncd "ReactJS and NextJS Tutorials/1)_ReactJS_Components_Props_JSX"
npm install
npm startcd "ReactJS and NextJS Tutorials/13)_NextJS_Server_Components_Static_Objects"
npm install
npm run devEach tutorial folder contains its own
package.jsonand instructions (if needed). For full‑stack projects, refer to their individual README files inside theAtomic Projectsfolder.
Contributions are welcome! You can:
- Report bugs or suggest new tutorials via Issues.
- Submit Pull Requests to improve code quality, add explanations, or fix typos.
- Share your own projects built from this learning path.
Guidelines:
- Follow the existing folder structure.
- Keep code clean and well‑commented.
- Update this README if you add major features.
This Repository is a living document of my journey from a JavaScript beginner to a full‑stack developer comfortable with TypeScript, React, Next.js, Node.js, and Express. Every line of code is written with learning in mind – mistakes, comments, and all.
Feel free to use these resources for your own learning, reference in your projects, or as a teaching aid. Star ⭐ the repo if you find it helpful, and don’t hesitate to reach out with questions.