{"id":31457416,"url":"https://github.com/maitepv87/capstone-project-coursera","last_synced_at":"2026-04-18T07:33:05.784Z","repository":{"id":305790974,"uuid":"1023964312","full_name":"maitepv87/capstone-project-coursera","owner":"maitepv87","description":"Final project for the Meta Frontend Developer Specialization. React app that sets up the foundation for a table reservation feature on the Little Lemon website, including cleaned boilerplate code and VS Code enhancements for streamlined development.","archived":false,"fork":false,"pushed_at":"2025-09-05T15:22:49.000Z","size":47053,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-03T23:30:42.352Z","etag":null,"topics":["custom-hooks","react-router","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maitepv87.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-22T01:40:42.000Z","updated_at":"2025-09-05T15:25:21.000Z","dependencies_parsed_at":"2025-07-22T03:37:52.971Z","dependency_job_id":"cc9915c6-6291-4a8d-a842-d20e8289ba4d","html_url":"https://github.com/maitepv87/capstone-project-coursera","commit_stats":null,"previous_names":["maitepv87/littlelemon-capstone-project","maitepv87/capstone-project-coursera"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maitepv87/capstone-project-coursera","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitepv87%2Fcapstone-project-coursera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitepv87%2Fcapstone-project-coursera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitepv87%2Fcapstone-project-coursera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitepv87%2Fcapstone-project-coursera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maitepv87","download_url":"https://codeload.github.com/maitepv87/capstone-project-coursera/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maitepv87%2Fcapstone-project-coursera/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29309593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T16:09:25.305Z","status":"ssl_error","status_checked_at":"2026-02-10T16:08:52.170Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["custom-hooks","react-router","reactjs"],"created_at":"2025-10-01T12:26:47.584Z","updated_at":"2026-02-10T17:34:04.814Z","avatar_url":"https://github.com/maitepv87.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Capstone Project\n\nFinal project for the Meta Frontend Developer Specialization on Coursera.\n\nThis React-based application lays the groundwork for a table reservation feature on the Little Lemon restaurant website. The project starts from a customized boilerplate, with a cleaned structure and developer tooling optimized for clarity, modularity, and workflow efficiency.\n\n\n![Capstone Project Screenshot](./src/assets/images/Screenshot.png)\n\n---\n\n## Key Features\n\n- React project initialized via `create-react-app`\n- Removal of default boilerplate elements (`App.js`, `logo.svg`)\n- Modular structure prepared for reservation functionality\n- VS Code extensions configured for a smoother dev experience:\n  - ES7+ React/Redux/GraphQL/React-Native snippets\n  - `Auto Rename Tag` for paired tag editing\n  - `Trailing Spaces` for whitespace hygiene\n\n---\n\n## Semantic HTML Foundation\n\nThis section fulfills the semantic layout exercise by:\n\n- Replacing non-semantic root `\u003cdiv\u003e` with a React fragment\n- Structuring the app with semantic tags: `\u003cheader\u003e`, `\u003cnav\u003e`, `\u003cmain\u003e`, `\u003cfooter\u003e`\n- Modularizing each section into reusable components\n- Adding accessible navigation using `NavLink` and `aria-label`\n- Including brand logo with descriptive `alt` text\n- Wrapping routed content inside `\u003cmain\u003e` for clarity and accessibility\n- Providing editorial closure in `\u003cfooter\u003e`\n\n\u003e _This structure improves onboarding, accessibility, and emotional clarity across the app._\n\n---\n\n## Metadata \u0026 Open Graph Optimization\n\nThe `index.html` file includes semantic and editorial metadata to support SEO and social sharing:\n\n- `description`, `author`, and `keywords` for search engine clarity\n- Open Graph tags (`og:title`, `og:description`, `og:image`, `og:url`) for rich previews on social platforms\n- Uses `%PUBLIC_URL%` for build-safe asset referencing\n- Editorial tone aligned with brand voice and Mediterranean warmth\n\n\u003e _This setup ensures the app appears correctly across search engines, social media, and mobile devices._\n\n---\n\n## CSS Layout System\n\nThis layout system transforms wireframes into responsive, reusable sections using semantic HTML and Flexbox. It adapts fluidly across devices, ensuring clarity and warmth.\n\n### Key Layout Decisions\n\n- Flexbox layout with `gap`, `justify-content`, and `align-items`\n- Media queries at `768px` for mobile stacking\n- Relative units (`rem`, `%`, `vh`) for fluid scaling\n- Modular CSS per component + shared rules in `layout.css`\n\n\u003e _Layout decisions support emotional readability and onboarding clarity across screen sizes._\n\n---\n\n## Visual Styling System\n\nThis section establishes the visual styling system for the Little Lemon web app, based on the Figma design and editorial tone. It defines reusable CSS rules for core HTML elements, ensuring consistency, warmth, and accessibility.\n\n### Key Styling Decisions\n\n- **Typography**: Styled `h1–h6`, `p`, and `span` with responsive `font-size`, `line-height`, and editorial spacing\n- **Navigation**: Styled `nav`, `ul`, and `li` with spacing, hover states, and semantic clarity\n- **Images**: Applied `max-width`, `height: auto`, and `border-radius` for visual softness and responsiveness\n- **Color System**: Used brand-aligned colors from Figma, applied via CSS variables and tokens\n- **Shadows \u0026 Borders**: Rounded corners and soft shadows applied selectively for warmth and depth\n\n\u003e _Styling choices reflect Mediterranean warmth and editorial clarity across components._\n\n---\n\n## Booking Page \u0026 Form\n\nThis section fulfills the “Defining the Bookings page” exercise by creating a modular, accessible, and editorially documented booking flow.\n\n### Components\n\n- `BookingPage`: Contains the page layout and title\n- `BookingForm`: Controlled form with modular fields\n\n### Form Fields\n\n- `Date`: `\u003cinput type=\"date\"\u003e`\n- `Time`: `\u003cselect\u003e` populated from context\n- `Guests`: `\u003cinput type=\"number\"\u003e`\n- `Occasion`: `\u003cselect\u003e` with fixed options\n- `Submit`: `\u003cbutton type=\"submit\"\u003e`\n\n### Behavior\n\n- Controlled state via `useFormReducer`\n- Validation on blur with emotional feedback\n- Time options fetched from context on open\n- Navigation to `/booking-confirmed` on submit\n\n\u003e _This implementation exceeds the exercise requirements by modularizing form logic, styling, and validation. It’s ready for API integration and unit testing in future steps._\n\n---\n\n### **Installation \u0026 Setup**\n\nFollow these steps to run the project locally:\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/maitepv87/capstone-project-coursera.git\ncd capstone-project-coursera\n```\n\n2. Install dependencie:\n\n```bash\nnpm install\n```\n\n3. Start the development server:\n\n```bash\nnpm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitepv87%2Fcapstone-project-coursera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaitepv87%2Fcapstone-project-coursera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaitepv87%2Fcapstone-project-coursera/lists"}