This repository is a curated collection of modern web applications built with React. It serves as a testament to a journey through frontend excellence, ranging from pixel-perfect landing pages to logic-heavy utility tools and fully tested applications. Each project is isolated, optimized, and built with industry-standard tooling.
This repository follows a Monorepo-style structure where each directory represents a standalone application with its own configuration and dependencies. The projects demonstrate mastery over:
- Component-Based Architecture: Reusable, modular, and maintainable code.
- Modern Build Tools: Utilizing Vite for blazing-fast development environments.
- State Management: Handling complex data flows and user interactions.
- Testing & Reliability: Implementing unit tests to ensure code stability.
- Type Safety: Leveraging TypeScript for robust application logic.
Below is a detailed breakdown of the applications contained within this repository:
| Project | Type | Tech Stack | Key Features |
|---|---|---|---|
| Firebase Contact App | 📇 CRUD App |    |
• Real-time Database: CRUD operations using Firebase Firestore. • Modal System: Custom hooks for managing modal states. • Search Functionality: Real-time filtering of contacts. • Modern UI: Built with Tailwind CSS & Lucide Icons. |
| Foody Zone | 🥗 App |  |
• Dynamic Filtering: Filter food items by category (Breakfast, Lunch, Dinner). • Search: Instant search functionality. • Styled Components: Component-level dynamic styling. • Responsive Grid: Adaptive layout for food cards. |
| Odisha SGPA/CGPA Calc | 🧮 Utility |  |
• Complex Logic: University-specific grade calculations. • Modern UI: Built with Tailwind CSS. • Type Safe: Fully typed with TypeScript. • State: Dynamic form inputs for subjects. |
| Little Lemon Restaurant | 🍽️ Capstone |   |
• Booking System: Form with validation & local storage. • Unit Testing: Jest & React Testing Library integration. • Routing: Multi-page navigation setup. • Accessibility: ARIA compliant components. |
| Brand Page | 👟 Landing |  |
• Hero Section: Pixel-perfect brand landing page. • Component Design: Clean separation of UI concerns. • Asset Management: Efficient handling of SVG assets. |
| Contact Us | 📞 Form |  |
• Interactive Form: Handling events and submission states. • Layout: Responsive contact layout. • CSS Modules: Scoped styling for maintainability. |
While individual projects may vary, the core technology ecosystem across this repository includes:
- Frontend Library: React 18+ / React 19
- Build Tool: Vite (for lightning-fast HMR)
- Language: JavaScript (ES6+) & TypeScript
- Styling: Tailwind CSS, Styled Components, CSS Modules
- Backend/BaaS: Firebase (Firestore)
- Testing: Jest, React Testing Library
- Runtime/Package Manager: Node.js, Bun, NPM
These projects are built on standard web technologies and are platform-agnostic.
├── 📁 Firebase
│ ├── 📁 .vite
│ │ └── 📁 deps
│ │ ├── ⚙️ _metadata.json
│ │ └── ⚙️ package.json
│ ├── 📁 public
│ │ ├── 🖼️ Hands Contact.svg
│ │ └── 🖼️ firebase.svg
│ ├── 📁 src
│ │ ├── 📁 assets
│ │ │ └── 🖼️ react.svg
│ │ ├── 📁 components
│ │ │ ├── 📄 ContactCard.tsx
│ │ │ ├── 📄 ContactModal.tsx
│ │ │ ├── 📄 Navbar.tsx
│ │ │ └── 📄 SearchBar.tsx
│ │ ├── 📁 config
│ │ │ └── 📄 firebase.ts
│ │ ├── 📁 hooks
│ │ │ └── 📄 useContacts.ts
│ │ ├── 📁 types
│ │ │ └── 📄 contact.ts
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.tsx
│ │ ├── 🎨 index.css
│ │ └── 📄 main.tsx
│ ├── ⚙️ .gitignore
│ ├── ⚙️ .prettierrc
│ ├── 📝 README.md
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ ├── 📄 prettier.config.js
│ ├── ⚙️ tsconfig.app.json
│ ├── ⚙️ tsconfig.json
│ ├── ⚙️ tsconfig.node.json
│ └── 📄 vite.config.ts
├── 📁 Foody-Zone
│ └── 📁 starter
│ ├── 📁 app
│ │ ├── 📁 public
│ │ │ ├── 🖼️ Foody_Zone_logo.svg
│ │ │ └── 🖼️ bg.png
│ │ ├── 📁 src
│ │ │ ├── 📁 components
│ │ │ │ ├── 📁 FilterButtons
│ │ │ │ │ ├── 📄 FilterButtons.jsx
│ │ │ │ │ ├── 📄 FilterButtons.styles.js
│ │ │ │ │ └── 📄 index.js
│ │ │ │ ├── 📁 FoodCard
│ │ │ │ │ ├── 📄 FoodCard.jsx
│ │ │ │ │ ├── 📄 FoodCard.styles.js
│ │ │ │ │ └── 📄 index.js
│ │ │ │ ├── 📁 FoodGrid
│ │ │ │ │ ├── 📄 FoodGrid.jsx
│ │ │ │ │ ├── 📄 FoodGrid.styles.js
│ │ │ │ │ └── 📄 index.js
│ │ │ │ ├── 📁 NavBar
│ │ │ │ │ ├── 📄 Navbar.jsx
│ │ │ │ │ ├── 📄 Navbar.styles.js
│ │ │ │ │ └── 📄 index.js
│ │ │ │ └── 📁 SearchResult
│ │ │ │ └── 📄 SearchResult.jsx
│ │ │ ├── 📁 hooks
│ │ │ │ ├── 📄 index.js
│ │ │ │ ├── 📄 useDebounce.js
│ │ │ │ ├── 📄 useFoodData.js
│ │ │ │ └── 📄 useFoodFilter.js
│ │ │ ├── 📁 styles
│ │ │ │ ├── 📄 common.styles.js
│ │ │ │ └── 📄 theme.js
│ │ │ ├── 📄 App.jsx
│ │ │ └── 📄 main.jsx
│ │ ├── ⚙️ .eslintrc.cjs
│ │ ├── ⚙️ .gitignore
│ │ ├── 🌐 index.html
│ │ ├── ⚙️ package-lock.json
│ │ ├── ⚙️ package.json
│ │ ├── 📄 vite.config.js
│ │ └── 📦 yarn.lock
│ ├── 📁 server
│ │ ├── 📁 public
│ │ │ └── 📁 images
│ │ │ ├── 🖼️ burger.png
│ │ │ ├── 🖼️ cake.png
│ │ │ ├── 🖼️ chicken.png
│ │ │ ├── 🖼️ egg.png
│ │ │ ├── 🖼️ pancake.png
│ │ │ └── 🖼️ ramen.png
│ │ ├── 📁 src
│ │ │ ├── 📄 index.ts
│ │ │ └── ⚙️ vercel.json
│ │ ├── ⚙️ .gitignore
│ │ ├── ⚙️ package.json
│ │ └── ⚙️ tsconfig.json
│ └── 📝 Readme.md
├── 📁 brand-page
│ ├── 📁 public
│ │ ├── 📁 assets
│ │ │ ├── 🖼️ amazon.svg
│ │ │ ├── 🖼️ brand_logo.svg
│ │ │ ├── 🖼️ flipkart.svg
│ │ │ └── 🖼️ shoe_image.svg
│ │ └── 🖼️ vite.svg
│ ├── 📁 src
│ │ ├── 📁 assets
│ │ │ └── 🖼️ react.svg
│ │ ├── 📁 components
│ │ │ ├── 📄 Hero.jsx
│ │ │ └── 📄 Nav.jsx
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.jsx
│ │ ├── 🎨 index.css
│ │ └── 📄 main.jsx
│ ├── ⚙️ .gitignore
│ ├── 📝 README.md
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ └── 📄 vite.config.js
├── 📁 contact-us
│ ├── 📁 public
│ │ ├── 📁 assets
│ │ │ ├── 🖼️ Service_24_7.svg
│ │ │ └── 🖼️ logo.svg
│ │ └── 🖼️ vite.svg
│ ├── 📁 src
│ │ ├── 📁 assets
│ │ │ └── 🖼️ react.svg
│ │ ├── 📁 components
│ │ │ ├── 📁 Button
│ │ │ │ ├── 📄 Button.jsx
│ │ │ │ └── 🎨 Button.module.css
│ │ │ ├── 📁 ContactForm
│ │ │ │ ├── 🎨 Contact.module.css
│ │ │ │ └── 📄 ContactForm.jsx
│ │ │ ├── 📁 ContactHeader
│ │ │ │ ├── 📄 ContactHeader.jsx
│ │ │ │ └── 🎨 ContactHeader.module.css
│ │ │ └── 📁 Navigation
│ │ │ ├── 📄 Nav.jsx
│ │ │ └── 🎨 Nav.module.css
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.jsx
│ │ ├── 🎨 index.css
│ │ └── 📄 main.jsx
│ ├── ⚙️ .gitignore
│ ├── 📝 README.md
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ └── 📄 vite.config.js
├── 📁 little_lemon_restaurants
│ ├── 📁 src
│ │ ├── 📁 assets
│ │ │ ├── 📁 icons_assets
│ │ │ │ ├── 🖼️ 1_ji5jV-KoRbEFScZQUPYyGg.png
│ │ │ │ ├── 🖼️ Basket.svg
│ │ │ │ ├── 🖼️ Dish icon.svg
│ │ │ │ ├── 🖼️ Logo.svg
│ │ │ │ ├── 🖼️ Mario and Adrian A.jpg
│ │ │ │ ├── 🖼️ Mario and Adrian b.jpg
│ │ │ │ ├── 🖼️ Recent.svg
│ │ │ │ ├── 🖼️ Ui kit (1).png
│ │ │ │ ├── 🖼️ Ui kit.svg
│ │ │ │ ├── 🖼️ basket .svg
│ │ │ │ ├── 🖼️ bruchetta.svg
│ │ │ │ ├── 🖼️ creditcard.svg
│ │ │ │ ├── 🖼️ greek salad.jpg
│ │ │ │ ├── 🖼️ home icon.svg
│ │ │ │ ├── 🖼️ lemon dessert.jpg
│ │ │ │ ├── 🖼️ restauranfood.jpg
│ │ │ │ ├── 🖼️ restaurant chef B.jpg
│ │ │ │ ├── 🖼️ restaurant.jpg
│ │ │ │ ├── 🖼️ 🦆 icon _eye_.svg
│ │ │ │ └── 🖼️ 🦆 icon _hamburger menu.svg
│ │ │ ├── 🖼️ User1.jpg
│ │ │ ├── 🖼️ User2.jpg
│ │ │ ├── 🖼️ User3.jpg
│ │ │ ├── 🖼️ esref-yasa-MOQ-CUuED8w-unsplash.jpg
│ │ │ └── 🖼️ joseph-gonzalez-iFgRcqHznqg-unsplash.jpg
│ │ ├── 📁 components
│ │ │ ├── 📄 About.jsx
│ │ │ ├── 📄 BookingForm.jsx
│ │ │ ├── 📄 BookingForm.test.jsx
│ │ │ ├── 📄 BookingPage.jsx
│ │ │ ├── 📄 BookingsTable.jsx
│ │ │ ├── 📄 ConfirmedBooking.jsx
│ │ │ ├── 📄 Footer.jsx
│ │ │ ├── 📄 Header.jsx
│ │ │ ├── 📄 Hero.jsx
│ │ │ ├── 📄 Highlights.jsx
│ │ │ ├── 📄 Main.jsx
│ │ │ ├── 📄 Main.localStorage.test.jsx
│ │ │ ├── 📄 Main.test.jsx
│ │ │ ├── 📄 Nav.jsx
│ │ │ └── 📄 Testimonial.jsx
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.jsx
│ │ ├── 🎨 index.css
│ │ └── 📄 main.jsx
│ ├── ⚙️ .gitignore
│ ├── 📝 README.md
│ ├── 📄 api.js
│ ├── 📄 babel.config.cjs
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── 📄 jest.config.cjs
│ ├── 📄 jest.setup.js
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ └── 📄 vite.config.js
├── 📁 odisha-sgpa-cgpa-calculation
│ ├── 📁 public
│ │ ├── 🖼️ Calculator.svg
│ │ ├── 🖼️ SGPA_Calc2.webp
│ │ ├── 🖼️ preview-card.webp
│ │ └── 📄 robots.txt
│ ├── 📁 src
│ │ ├── 📁 components
│ │ │ ├── 📄 CGPACalculator.jsx
│ │ │ ├── 📄 GradingTable.jsx
│ │ │ ├── 📄 PercentageConverter.jsx
│ │ │ └── 📄 SGPACalculator.jsx
│ │ ├── 📁 lib
│ │ │ ├── 📄 calculator.js
│ │ │ └── 📄 utils.js
│ │ ├── 📁 pages
│ │ │ ├── 📄 Index.jsx
│ │ │ └── 📄 NotFound.jsx
│ │ ├── 🎨 App.css
│ │ ├── 📄 App.jsx
│ │ ├── 📄 main.jsx
│ │ └── 🎨 styles.css
│ ├── 📝 README.md
│ ├── 📄 bun.lockb
│ ├── 📄 eslint.config.js
│ ├── 🌐 index.html
│ ├── ⚙️ package-lock.json
│ ├── ⚙️ package.json
│ ├── 📄 postcss.config.js
│ ├── 📄 tailwind.config.js
│ ├── ⚙️ tsconfig.app.json
│ ├── ⚙️ tsconfig.json
│ ├── ⚙️ tsconfig.node.json
│ └── 📄 vite.config.js
├── 📝 README.md
└── 📝 readme2.md
Since this is a collection of projects, you will need to navigate to the specific project folder you wish to run.
- Node.js (v18+) OR Bun (v1.0+)
-
Clone the Repository:
git clone [https://github.com/4-Endless-coder/codex-react-projects.git](https://github.com/4-Endless-coder/codex-react-projects.git) cd codex-react-projects -
Choose a Project & Install Dependencies:
-
For
Firebase(Contact App):cd Firebase npm install npm run dev -
For
Foody-Zone:cd Foody-Zone/starter/app npm install npm run dev -
For
odisha-sgpa-cgpa-calculation:cd odisha-sgpa-cgpa-calculation bun install # or npm install bun run dev
-
For
little_lemon_restaurants:cd little_lemon_restaurants npm install npm run dev npm test
-
-
Explore More: For a comprehensive overview of these projects and more, please visit my portfolio:
Crafted with precision by Ashesh Dash (4-Endless-coder)