Javascript group capstone project

📗 Table of Contents

• 📖 About the Project
  • 🛠 Walk through
  • 🛠 Built With
  • Tech Stack
  • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 Food Menu

"Food-menu" is about building group web application based on an external API. We will select an API that provides data about a topic that we like and then build the webapp around it. The webapp will have 2 or 3 user interfaces (depending on the size of our team):

• A home page showing a list of items that you can "like."
• A popup window with more data about an item that you can use to comment on it or reserve it for a period of time.

Will start by building the core functionalities. At the very beginning the web will look similar to the UI below. Note that it will allow to add like and comment. However we have not added the reservation system.

How to build the "Food Menu" website

• 1. Use callbacks and promises.
• 2. Learn how to use proper ES6 syntax.
• 3. Use ES6 modules to write modular JavaScript.
• 4. Use webpack to bundle JavaScript.
• 5. Implementation of External API

Responsive website for communities events and particpants details

This project is about creating a responsive website to showcase community event, activities and agenda. This is a implementation of SINGLE PAGE APPLICATION widely known as SPA.

Food Menu: mobile-first approach & responsive on desktop version and bigger size is a capstone project in the process of experiences mimic real-world projects where we must apply what we learned throughout the entire Module, and are built with business specifications that will look really nice in our portfolio. This is a Single Page Application project where in a single page all elements are called through JavaScript Dynamic programming.

🛠 Walk through

• See the Project Requirement
• If required you should personalize the content of your page. Choose a topic that is different than the one in the original design
***API REQUIREMENTS***
• API Used

Involvement API Used

🛠 Built With

feature-One

• Imeplementation of Basic Framework linters error free.
• Implementation of Kanban Board
• Implementation of Gitflow

feature-two

• Implementation of Webpack Framework

featture-three

• We will create a Food Menu for the visitor eloborating different options and type
• Choosing the API
• Choose images, text, icons, fonts.
• Set up the repository and tools has been done in feature-one, and feature-two

feature-four Showing the comments of the API in the Popup Comment section.

Feature-five Imeplementation of the activity as, when the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated. Implementation of the item counter.

feature-six Implementation to make comment by the user to be added in the API.

feature-seven Updating linter errors

feature-eight Implementaion of the Comment counter

feature-nine Imeplementation of unit test for the item counter.

feature-ten Implementation of the unit test for the comment counter.

Tech Stack

Client Side / Front-End

• HTML
• CSS
• Javascript

Server Side / Back-End

• JSON

Tools i have used for this project

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• Github Pages
• Github Actions
• Git

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop
• Behance

Key Features

• Mobile First Approach
• Responsive Website
• Button Interactions (i.e. hover, etc.)
• Attractive Images & Design
• Modal/dialog
• Dynamic page (data is retrieved from JSON file)

(back to top)

🚀 Live Demo

Live Demo Link

🚀 Live Recording

The recording

💻 Getting Started

Hi, there, I'm Rassel - aka [Full Stack Developer] Check my portfolio

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need:

• git version 2.38.x
• node.js version > 12.x
• IDE
• browser (chrome, firefox, edge, safari)

Setup

Clone this repository to your desired folder:

  cd my-folder
  git git@github.com:RHK-MICROVERSE/food-menu.git

Install

Install this project with:

  cd my-project
  node install

Usage

To run the project, execute the following command: run live server

Run tests

To run tests, run the following command: Run Github Actions Test

  npx stylelint "**/*.{css,scss}"

Deployment

This project is deployed at github pages you can clone it here. Please click to clone

(back to top)

👥 Authors

• Main Author: Rassel Hassan Kadir
• Co-Author: Abdullah Al-Khureif

List of the collaborators of this project. 👤 Abdullah Al-Khureif
👤 Rassel Hassan Kadir

• GitHub: @githubhandle
• Twitter: @twitterhandle
• Linkedin: @linkedinhandle
• Email: 9rhktrading@gmail.com

(back to top)

🔭 Future Features

• [ ] Dynamic content.
• [ ] Add functionality of Javascript API
• [ ] Will add some background and beautification

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project give a star to this repositiory.

(back to top)

🙏 Acknowledgments

I would like to thank the Microverse full-stack curriculum for the inspiration and guidance.

(back to top)

❓ FAQ

• Is it allowed to copy the contents of this project and use it for personal use?

  • Yes, this project is free for copying and reusing in any way you like.

  • How often will the future features will be implemented?

  • As this is personal porfolio, the owner will update this projects pages more frequently with every enhancements in personal status.

📝 License

This project is under MIT licensed.

(back to top)