{"id":26560598,"url":"https://github.com/francisco1904/react-capstone_project-ll","last_synced_at":"2026-04-13T19:31:52.324Z","repository":{"id":283537171,"uuid":"942794649","full_name":"Francisco1904/react-capstone_project-LL","owner":"Francisco1904","description":"Little Lemon Restaurant App is a front-end capstone project built with React.js, showcasing a responsive design, advanced reservation system, dynamic menu, and SCSS-based styling. It emphasizes modular components, accessibility, and performance optimization using Vite.","archived":false,"fork":false,"pushed_at":"2025-03-28T17:28:59.000Z","size":71511,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T17:47:30.596Z","etag":null,"topics":["accessibility","bem-methodology","component-architecture","css","custom-hooks","dynamic-forms","flexbox-layout","grid-layout","hot-module-replacement","react-context-api","react-router","reactjs","scss","state-management","vite"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Francisco1904.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-04T17:27:05.000Z","updated_at":"2025-03-28T17:29:02.000Z","dependencies_parsed_at":"2025-03-20T20:04:13.546Z","dependency_job_id":null,"html_url":"https://github.com/Francisco1904/react-capstone_project-LL","commit_stats":null,"previous_names":["francisco1904/react-capstone_project-ll"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Francisco1904/react-capstone_project-LL","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Francisco1904%2Freact-capstone_project-LL","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Francisco1904%2Freact-capstone_project-LL/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Francisco1904%2Freact-capstone_project-LL/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Francisco1904%2Freact-capstone_project-LL/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Francisco1904","download_url":"https://codeload.github.com/Francisco1904/react-capstone_project-LL/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Francisco1904%2Freact-capstone_project-LL/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271103202,"owners_count":24699646,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-19T02:00:09.176Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","bem-methodology","component-architecture","css","custom-hooks","dynamic-forms","flexbox-layout","grid-layout","hot-module-replacement","react-context-api","react-router","reactjs","scss","state-management","vite"],"created_at":"2025-03-22T13:18:28.357Z","updated_at":"2025-10-16T10:36:27.211Z","avatar_url":"https://github.com/Francisco1904.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Little Lemon Capstone Project\n\n![Completed](https://img.shields.io/badge/status-completed-green)\n\n## 📌 Project Overview\n\n**Project Name:** \"Little Lemon Restaurant App\"\n\n## 🌟 Preview\n\n![Hero Section](./screenshots/hero-section.png)\n![Menu Page](./screenshots/menu-page.png)\n![Reservations Page](./screenshots/reservations-page.png)\n\n## 🚀 Live Demo\n\n[View Live Demo](https://littlelemon-capstone-app.vercel.app/) - Experience the app in action!\n\n## 🏗️ Project Role\n\nThis project was developed as a solo effort. Design assets were provided as part of the project requirements.\n\n## ✨ Description\n\nThis project was built using **React.js** to showcase my skills as a **Junior Front-End Developer**. It highlights best practices in UI/UX design, component-based architecture, scalability, and maintainability.\n\n## 🌟 Key Features\n\n- **Intuitive UI/UX**: Clean navigation and user-friendly interface with clear visual hierarchy\n- **Responsive Design**: Custom breakpoints for optimal viewing on mobile, tablet, and desktop devices\n- **Advanced Reservation System**: Full-featured booking functionality with time slot selection, party size options, and special requests\n- **Real-time Form Validation**: Interactive feedback during reservation process with accessibility features\n- **SCSS Architecture**: Consistent branded styling using SCSS architecture with variables, mixins, and partials for maintainable styling across a growing component library\n- **Dynamic Menu Showcase**: Featured dishes with filtering options, descriptions, and vivid imagery\n- **Customer Testimonials**: Review section with star ratings\n- **Performance Optimization**: Built with Vite for near-instant HMR and optimized production bundles with automatic code splitting\n- **Modular Component Design**: Reusable UI elements with consistent props interfaces for Cards, Buttons, and Form elements\n- **Accessibility Compliant**: WCAG standards implementation for inclusive user experience\n\n## 📑 Table of Contents\n\n1. [Installation Guide](#-installation-guide)\n2. [Project Architecture](#-project-architecture)\n3. [Styling Architecture](#-styling-architecture)\n4. [Testing \u0026 Performance](#-testing--performance)\n5. [Challenges \u0026 Solutions](#-challenges--solutions)\n6. [Deployment](#-deployment)\n7. [License](#-license)\n8. [Contact Information](#-contact-information)\n\n---\n\n## 🔧 Installation Guide\n\n### Prerequisites\n\n- **Node.js** (v18.0.0 or higher)\n- **Git** (for cloning the repository)\n- **React.js** (v18.3.0 or higher)\n\n### Setup Instructions\n\n1. Clone the repository:\n   ```sh\n   git clone https://github.com/Francisco1904/little-lemon-app-full.git\n   cd little-lemon-app-full\n   ```\n2. Install dependencies:\n   ```sh\n   npm install\n   ```\n3. Compile SCSS to CSS:\n   ```sh\n   npm run scss:build\n   ```\n4. Start the development server:\n   ```sh\n   npm run dev\n   ```\n5. Open your browser and navigate to `http://localhost:5173/` to view the application.\n\n---\n\n## 🏗️ Project Architecture\n\n### Tech Stack\n\n- **Frontend:**\n  - React.js (v18.3.1)\n  - React Router for page navigation\n  - SCSS for enhanced styling capabilities\n  - CSS Custom Properties for theming\n- **Build Tool:** Vite (v6.2.0)\n- **Version Control:** Git \u0026 GitHub\n- **Testing:** Vitest with React Testing Library\n- **Deployment Platform:** Vercel\n- **Analytics:** Vercel Web Analytics for tracking visitor metrics without compromising user privacy\n\n### 🔒 Security\n\nThis project follows security best practices for a React application. For details on how we handle dependency vulnerabilities and our security policy, please see [SECURITY.md](./SECURITY.md).\n\n---\n\n### Architecture Overview\n\nThe project follows a **component-based architecture** with clear separation of concerns:\n\n- **Pages:** Container components that represent full pages in the application\n- **Components:** Reusable UI elements that compose the pages\n- **Assets:** Static resources like images and logos\n- **Styles:** Global and component-specific styling using SCSS\n- **Context:** State management for booking functionality\n\n### Key Design Patterns\n\n1. **Component Composition:** Building complex UIs from smaller, focused components\n2. **Prop Drilling:** Passing data to child components through props\n3. **SCSS Variables \u0026 Mixins:** Using SCSS features for consistent styling\n4. **Responsive Design:** Mobile-first approach with flexible grid layouts\n5. **BEM-style Naming:** For component organization in SCSS\n\n### Folder Structure\n\n```\n├── src\n│   ├── Components        # Reusable UI components (Header, Footer, Card, etc.)\n│   ├── pages             # Page components (HomePage, ReservationsPage, etc.)\n│   ├── assets            # Images and static resources\n│   ├── context           # Context providers for state management\n│   ├── utils             # Utility functions\n│   ├── styles            # Styling files\n│   │   ├── scss/         # Source SCSS files\n│   │   │   ├── _variables.scss  # Design tokens and variables\n│   │   │   ├── _mixins.scss     # Reusable patterns and functions\n│   │   │   ├── _reset.scss      # CSS reset\n│   │   │   ├── components/      # Component-specific styles\n│   │   │   ├── pages/           # Page-specific styles\n│   │   │   └── main.scss        # Main SCSS file that imports all partials\n│   │   └── css/          # Compiled CSS (generated from SCSS)\n│   ├── App.jsx           # Main application component\n│   └── main.jsx          # Application entry point\n```\n\n---\n\n## 🎨 Styling Architecture\n\n### Modern SCSS Architecture\n\nThis project follows modern front-end development best practices by implementing a clean, organized SCSS architecture:\n\n- **Single Source of Truth**: All styles are managed through SCSS and compiled into a single CSS file\n- **Component-Based Organization**: Styles are organized by component and feature\n- **Consistent Variables**: Design tokens are centralized in \\_variables.scss for easy theming\n- **Responsive Design**: Mobile-first approach with consistent breakpoint mixins\n- **Performance**: CSS is optimized during build process\n- **Future-Proof SASS Features**: Uses modern SASS modules and best practices to avoid deprecation warnings\n\n### SCSS Structure\n\n```\nstyles/\n├── scss/                  # Source SCSS files\n│   ├── _variables.scss    # Design tokens and variables\n│   ├── _mixins.scss       # Reusable patterns and functions\n│   ├── _reset.scss        # CSS reset/normalize\n│   ├── _global.scss       # Global styles\n│   ├── _typography.scss   # Text styling\n│   ├── _buttons.scss      # Button components\n│   ├── components/        # Component-specific styles\n│   │   ├── _header.scss\n│   │   ├── _footer.scss\n│   │   └── ...etc\n│   ├── pages/             # Page-specific styles\n│   │   ├── _reservations.scss\n│   │   └── ...etc\n│   └── main.scss          # Main entry point that imports all partials\n├── css/                   # Compiled CSS (don't edit directly)\n    └── main.css           # The compiled stylesheet\n```\n\n### SCSS Features Used\n\n- **Variables**: Defined in `_variables.scss` for consistent tokens\n- **Nesting**: For cleaner, more readable selectors\n- **Mixins**: For reusable style patterns\n- **Partials**: Split styles into maintainable chunks\n- **BEM-style naming**: For component organization\n- **Modern Color Manipulation**: Utilizes the `sass:color` module for color adjustments instead of deprecated global functions\n- **Clean Declaration Structure**: Follows SASS best practices for declaration ordering to prevent \"mixed declarations\" warnings\n\n### Development Workflow\n\nRun `npm run scss` to watch SCSS files and compile changes automatically during development.\nRun `npm run scss:build` to compile a production-ready version for deployment.\n\n---\n\n## 🎨 CSS Architecture\n\nThis project follows modern front-end development best practices by implementing a clean, organized SCSS architecture:\n\n### Structure\n\n- **Single Source of Truth**: All styles are managed through SCSS files in `src/styles/scss/` and compiled into a single CSS file (`src/styles/css/main.css`)\n- **Component-Based Organization**: Styles are organized by component and feature\n- **Consistent Variables**: Design tokens are centralized in `_variables.scss` for easy theming\n- **Responsive Design**: Mobile-first approach with consistent breakpoint mixins\n- **Performance**: CSS is optimized during build process\n\n### Key Files\n\n- `src/styles/scss/` - Source SCSS files\n  - `_variables.scss` - Design tokens and theme variables\n  - `_mixins.scss` - Reusable style patterns\n  - `_global.scss` - Global styles and utilities\n  - `components/` - Component-specific styles\n  - `pages/` - Page-specific layouts and styles\n\n### Benefits\n\n- **Maintainability**: Easier to maintain and update styles\n- **Consistency**: Enforces design system consistency across components\n- **Developer Experience**: Better organization for multiple developers\n- **Performance**: Single CSS file reduces HTTP requests\n\n---\n\n## 🧪 Testing \u0026 Performance\n\n### Testing Framework\n\n- **Vitest:** For unit and component testing\n- **React Testing Library:** For component-focused testing\n- **User Event:** For simulating user interactions\n\n### Performance Testing\n\nThe project includes several performance test suites to ensure optimal user experience:\n\n- **Component Render Performance:** Measures render time for key components\n- **Page Load Performance:** Measures CLS, FID, and LCP metrics using web-vitals\n- **React Profiler Tests:** Uses React Profiler for detailed rendering analysis\n- **Memory Usage Tests:** Ensures components don't introduce memory leaks\n- **Navigation Performance:** Measures routing transition times\n\n### Running Tests\n\n```sh\n# Run all tests\nnpm run test\n\n# Run performance tests only\nnpm run test:performance\n\n# Run specific test file\nnpm run test src/tests/performance/ComponentRenderTests.test.jsx\n```\n\n---\n\n## 🔥 Challenges \u0026 Solutions\n\n### Roadblocks Faced \u0026 Fixes:\n\n1. **Issue: Navigation bar width mismatch with content**\n   - ✅ **Solution:** Applied CSS flexbox adjustments and ensured consistent max-width across components.\n2. **Issue: Component state not updating correctly**\n   - ✅ **Solution:** Used controlled components and React's `useState` hook to manage state effectively.\n3. **Issue: CSS maintainability with growing codebase**\n   - ✅ **Solution:** Migrated to SCSS with partials, mixins, and variables for better organization.\n4. **Issue: Form validation complexities**\n   - ✅ **Solution:** Created custom validation system with error handling and accessibility features.\n5. **Issue: Git conflicts during collaborative work**\n   - ✅ **Solution:** Implemented proper Git branching strategies and resolved merge conflicts.\n6. **Issue: Router context missing in component tests**\n   - ✅ **Solution:** Implemented proper BrowserRouter wrapping for components using navigation hooks during testing.\n7. **Issue: Performance bottlenecks in component rendering**\n   - ✅ **Solution:** Created custom performance measurement utilities and established render time thresholds for key components.\n8. **Issue: Accessibility for form validation errors**\n   - ✅ **Solution:** Implemented ARIA attributes and screen reader announcements for improved error messaging.\n9. **Issue: Mobile responsiveness breaking at specific breakpoints**\n   - ✅ **Solution:** Refactored to a mobile-first approach with strategic breakpoints and fluid typography.\n10. **Issue: State management complexity in booking flow**\n    - ✅ **Solution:** Implemented React Context API with custom hooks for centralized booking state management.\n11. **Issue: Memory leaks in components with timers/subscriptions**\n    - ✅ **Solution:** Added proper cleanup with useEffect return functions and designed comprehensive memory usage tests.\n12. **Issue: SASS deprecation warnings during build process**\n    - ✅ **Solution:** Refactored to use `sass:color` module instead of global color functions and fixed mixed declaration patterns in SCSS files.\n\n---\n\n## 🌎 Deployment\n\n### Steps to Deploy on Vercel (or Netlify, if used)\n\n1. Build the project:\n   ```sh\n   npm run scss:build \u0026\u0026 npm run build\n   ```\n2. Deploy using Vercel CLI:\n   ```sh\n   vercel deploy\n   ```\n3. Obtain the deployment URL and verify the live project.\n\n---\n\n## 📝 License\n\nThis project is licensed under the [MIT License](./LICENSE). Feel free to use, modify, and distribute this project as per the terms of the license.\n\n---\n\n## 📬 Contact Information\n\n- **GitHub:** [Francisco1904](https://github.com/Francisco1904)\n- **Email:** [franciscopontes94@gmail.com](mailto:franciscopontes94@gmail.com)\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancisco1904%2Freact-capstone_project-ll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffrancisco1904%2Freact-capstone_project-ll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffrancisco1904%2Freact-capstone_project-ll/lists"}