Capstone Project

🏁 Capstone Project: Habesh Foods Website - Now with React! 

🌍 Project Story (Scenario)

Congratulations! You have been invited back by Habesh Foods, the traditional Ethiopian restaurant in Addis Ababa, to upgrade their website. You already created it using HTML, CSS, and JavaScript, and the owners loved it!

Now that you have learned React and Git, you are asked to rebuild the same website using React and host it on your public GitHub account. This is your chance to show off your modern front-end skills!

🔗 What You Will Build

You will create a React application that:

• Showcases the restaurant's story, menu, and gallery.

• Uses components to organize sections (About, Menu, Gallery, etc.).

• Includes React state/hooks if needed (like a button click counter for visitors).

• Is hosted on GitHub (public repository) so you can show it in your portfolio.

📂 Project Folder Structure

habesh-foods-react/

├── public/

│   └── index.html

├── src/

│   ├── components/

│   │   ├── Header.js

│   │   ├── About.js

│   │   ├── Menu.js

│   │   ├── Gallery.js

│   │   └── Footer.js

│   ├── App.js

│   ├── index.js

│   └── styles.css

└── package.json

✨ Project Requirements

1️⃣ Home Page (Main Page)

• Use a Header Component with the text:
  🏠 Welcome to Habesh Foods
  (Add a simple navigation bar if you want)

2️⃣ About Section

• Create an About Component with:

  • Short description of the restaurant.

  • Information about Ethiopian Traditional Foods.

3️⃣ Menu Section

• Create a Menu Component with:

  • Traditional Foods (list with clickable links)
    (Doro Wat, Shiro, Tibs, etc. — each should open Wikipedia in a new tab)

  • Drinks Section (nested list - alcoholic and non-alcoholic)

4️⃣ Cooking Demo Section

• Add a section with:

  • A short description about the Doro Wat Recipe Video.

  • A button that opens the YouTube video link.

5️⃣ Gallery Section

• Display at least 2 images of Ethiopian food.

• Each image should link to Google Images search results for Ethiopian food.

6️⃣ Footer Section

• Add a footer component with a copyright message like:
  © 2025 Habesh Foods. All Rights Reserved.

🛠️ Technical Requirements

• Use React Functional Components.

• Use CSS for styling (external or module CSS is fine).

• Use Git to track your changes.

• Push the entire project to your public GitHub repository.

• Share your GitHub repository link with your instructor.

📈 Evaluation Criteria

• Clean folder structure.

• Proper use of React components.

• Proper use of lists, links, and images.

• Clear and organized CSS styles.

• GitHub repository is public and well-named.

• README file (optional but recommended) with a project description.

✅ Final Note

This project helps you practice:

• Converting an HTML project to a modern React project.

• Using components to organize your code.

• Practicing Git workflow (add, commit, push).

• Getting used to publishing projects on GitHub.

This is your capstone project for this course — make it great! 🌟