🌐 Live Demo
-
CodeJump Projects (HTML / CSS / Tailwind)
👉 https://code-jump-flax.vercel.app/ -
Amazon Clone – JavaScript Version
👉 https://amazon-javascript.vercel.app/ -
Amazon Clone – React / TypeScript Version
👉 http://ecommerce-project-react-env.eba-dk4rijff.us-east-1.elasticbeanstalk.com/
CodeJump is a project-based front-end learning repository that demonstrates a clear progression from HTML & CSS fundamentals to JavaScript, and finally to React with TypeScript.
It focuses on building responsive user interfaces, interactive applications, and scalable front-end architectures.
The centerpiece of this repository is the Amazon Shopping Website, which is developed progressively using JavaScript → React → TypeScript, reflecting real-world industry workflows.
This repository is designed for developers who learn best by building real projects.
Each section represents a step forward in both technical depth and architectural complexity:
- Responsive web design with HTML & CSS
- Interactive applications with JavaScript
- Component-driven development using React
- Strongly typed, scalable applications with TypeScript
- 18 responsive websites built using pure HTML and CSS
- Flexbox and Grid layouts
- Media queries and responsive design
- Modern UI structuring techniques
- 1 Tailwind CSS practice project
- Utility-first styling
- Rapid UI prototyping
Goal: Build a strong foundation in layout, responsiveness, and visual design.
JavaScript projects focus on core logic, DOM manipulation, and user interaction.
-
Amazon Shopping Website (JavaScript Version)
- Product listing
- Cart functionality
- User interactions
- Business logic without frameworks
-
Rock–Paper–Scissors Game
- Game logic
- Event handling
- DOM updates
-
Basic JavaScript Practice
- Variables and functions
- Conditionals and loops
- Events and basic logic
Goal: Master JavaScript fundamentals before transitioning to frameworks.
React + TypeScript projects focus on component-based architecture, typed state management, and scalable application design.
-
Amazon Shopping Website (REACT and TypeScript Version)
-
Chatbot Application
- Built with React and TypeScript
- Component communication
- User input handling
- Dynamic message rendering
- Typed props and state
-
Basic React Practice
- JSX and component structure
- Props and state
- Event handling
- Conditional rendering
- React hooks (
useState,useEffect)
The Amazon Shopping Website is the primary and most important project in this repository.
It represents a full real-world development journey and demonstrates how a JavaScript application evolves into a scalable React + TypeScript codebase.
JavaScript → React → TypeScript
-
JavaScript
- Core logic and DOM manipulation
- Understanding application flow and state
-
React
- Component-based architecture
- Reusable UI components
- State-driven rendering
-
TypeScript
- Strong typing for props, state, and utilities
- Improved maintainability and refactor safety
- Scalable and well-structured codebase
- Product listing and detail pages
- Shopping cart and checkout flow
- Order tracking and history
- Asynchronous data handling
- Modular and reusable components
- Unit and integration testing
- React
- TypeScript
- Vite
- ESLint
- Modern testing tools (Vitest)
- Build responsive websites from scratch
- Develop strong JavaScript fundamentals
- Understand React component architecture
- Apply TypeScript in real projects
- Create scalable and maintainable front-end applications
Open any .html file in your browser or use the Live Server extension in VS Code.
npm install
# For JavaScript projects
npm start
# For React / TypeScript (Vite)
npm run dev