/Jerk-Shack-Restaurant

A Caribbean Restaurant Website built for Code First Girls' Javascript Kickstarter Course

Primary LanguageJavaScript

Jerk Shack Restaurant

Table of contents

Overview

The project

A collaborative attempt to create a Caribbean Restaurant Website as part of Code First Girls' Coding Kickstarter Javascript Course. We built a web app to allow users to book a reservation, contact the restaurant and see a picture gallery of the dishes and restaurant.

We used the MosCow method to set out our goals for this project.

Must Have

  • Book a reservation
  • Picture gallery of food and restaurant
  • Navagation Bar
  • Responsiveness
  • Footer
  • Contact page

Should Have

  • Pre-order Food from the Menu
  • Lucky Draw Discount
  • Web accessibility
  • Walk-In Queuing Tickets
  • Payments

Could Have

  • Feedback
  • Meal kits
  • Subscribe to Blog for Recipes
  • Allergy Information
  • Calorie Information
  • Calorie Calculator
  • FAQ

Wont Have

  • Pop Up Messages (Events, Announcements)
  • Customer Service Chat Bot
  • Dark Mode

Project Setup

We used GitHub Desktop to collaborate and work asychronously. In our file structure, we have divided the main set up into two folders with public and src.

public

This folder is where we have stored the icons and the base html file where we have imported Google Font and Font Awesome scripts to run the web app.

src

This folder is main folder where we have stored media files, components, containers and pages to run the website.

  • In the assets folder, you can find the images and any other media files used.
  • In the components folder, you can find reusable components such as Navbar to render the web app.
  • In the container folder, you can find sections to render parts of the website such as About Us on our homepage.
  • In the layout folder, you can find a file named "MainLayout.js" used as the base file to render other pages in the website such as the Contact page.
  • In the pages folder, you can find files used to render different pages in our web app.
  • The App.js file is used to render the homepage of the website.
  • The index.js file, we have implemented a router to create different paths to access different pages on the website.

File Structure

.
├── README.md
├── build
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon-ipad-76x76.png
│   ├── apple-touch-icon-ipad-retina-152x152.png
│   ├── apple-touch-icon-iphone-60x60.png
│   ├── apple-touch-icon-iphone-retina-120x120.png
│   ├── apple-touch-icon.png
│   ├── asset-manifest.json
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── robots.txt
│   └── static
│       ├── css
│       │   ├── main.a950db5b.css
│       │   └── main.a950db5b.css.map
│       ├── js
│       │   ├── main.38663b78.js
│       │   ├── main.38663b78.js.LICENSE.txt
│       │   └── main.38663b78.js.map
│       └── media
│           ├── caribbean_food.99d1412405a95e0deda8.jpeg
│           └── team.1fadae52d0dca3bd7c7f.jpg
├── package-lock.json
├── package.json
├── public
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon-ipad-76x76.png
│   ├── apple-touch-icon-ipad-retina-152x152.png
│   ├── apple-touch-icon-iphone-60x60.png
│   ├── apple-touch-icon-iphone-retina-120x120.png
│   ├── apple-touch-icon.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── assets
│   │   ├── caribbean_food.jpeg
│   │   ├── constants
│   │   │   ├── data.js
│   │   │   ├── images.js
│   │   │   └── index.js
│   │   ├── gallery01.png
│   │   ├── gallery02.png
│   │   ├── gallery03.png
│   │   ├── gallery04.png
│   │   ├── meal.mp4
│   │   ├── menu.png
│   │   └── team.jpg
│   ├── components
│   │   ├── Button
│   │   │   └── Button.js
│   │   ├── Footer
│   │   │   ├── Footer.css
│   │   │   ├── Footer.jsx
│   │   │   ├── SubscribeButton.css
│   │   │   └── SubscribeButton.jsx
│   │   ├── Menuitem
│   │   │   ├── MenuItem.css
│   │   │   └── MenuItem.jsx
│   │   ├── Navbar
│   │   │   ├── Navbar.css
│   │   │   └── Navbar.jsx
│   │   ├── SubHeading
│   │   │   └── SubHeading.jsx
│   │   └── index.js
│   ├── container
│   │   ├── AboutUs
│   │   │   ├── AboutUs.css
│   │   │   └── AboutUs.jsx
│   │   ├── Chef
│   │   │   ├── Chef.css
│   │   │   └── Chef.jsx
│   │   ├── Findus
│   │   │   └── FindUs.jsx
│   │   ├── Gallery
│   │   │   ├── Gallery.css
│   │   │   └── Gallery.jsx
│   │   ├── Header
│   │   │   ├── Header.css
│   │   │   ├── Header.jsx
│   │   │   ├── LuckyDrawButton.css
│   │   │   └── LuckyDrawButton.jsx
│   │   ├── Intro
│   │   │   ├── Intro.css
│   │   │   └── Intro.jsx
│   │   ├── Laurels
│   │   │   ├── Laurels.css
│   │   │   └── Laurels.jsx
│   │   ├── Menu
│   │   │   ├── SpecialMenu.css
│   │   │   └── SpecialMenu.jsx
│   │   └── index.js
│   ├── index.css
│   ├── index.js
│   ├── layout
│   │   └── MainLayout.js
│   ├── logo.svg
│   ├── pages
│   │   ├── Contact
│   │   │   ├── Contact.css
│   │   │   └── Contact.jsx
│   │   └── Queuing
│   │       ├── Queuing.css
│   │       └── Queuing.jsx
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

Design

  • Color Hunt was used to find a colour palette to suit the Caribbean theme of the website
  • Google Fonts was used to find fonts to suit the Caribbean theme
  • Inspiration was mainly taken from Cottons Restaurant, a Caribbean Franchise Restaurant in London.

Wireframes

homepage menu menu

Links

General Instructions

Built with

  • Figma - A cloud-based design tool
  • HTML5 - The web framework used
  • CSS - The styling language used
  • Javascript - The programming language used
  • React - The front-end framework used

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

What things you need to install the software and how to install them

@testing-library/jest-dom@5.16.5
@testing-library/react@13.4.0
@testing-library/user-event@13.5.0
bootstrap@5.2.3
gh-pages@5.0.0
react-bootstrap@2.7.4
react-dom@18.2.0
react-icons@4.8.0
react-router-dom@6.10.0
react-router-hash-link@2.4.3
react-scripts@5.0.1
react@18.2.0
web-vitals@2.1.4

Installing

Our application is using npm for package management. To install all the necessary package follow these steps:

  1. Install dependencies
npm install

Then launch the server

npm run start

The page will run in development mode in http://localhost:3000 where you can view it in your browser.

Deployment

To deploy the package, enter the command:

npm run build

Authors

Acknowledgements

  • This project came together thanks to the knowledge we learnt during the Code First Girls's Javascript Kickstarter Course. Shoutouts to our Instructors Tamsin, Akram and Joseph for their guidance and sharing their knowledge over the 8 weeks!

Resources

  • Learning how to use relative file path helped a lot with importing components, this video on YouTube really helped us out
  • Followed this tutorial to set up React Router, which allowed us to have multiple pages in our webpage
  • Made use of HashLink to link to a different section of the same page
  • Learnt how to set up and use react-bootstrap framework using this tutorial
  • Looked at other README files on GitHub and followed a video on how to write a good README.md file