JustApp55 / Menu-app

The Full Stack MERN App - Frontend

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Menu App

This project was bootstrapped with Create React App.

Usage of the website

A display of all items on Index Page

Index Page of Items!

To see only certain category (breakfast, lunch, drinks, & dessert) of food items, click one of the gray buttons below the "Menu Item" header on the Index page.

Category of Items!

On Index page, click on any image-item of your preference to know more of the food item and will be taking to the Show Page

Show Page of individual product!

Usage of the buttons

Click on Create New Product button on Index Page to take you to List New Item page

List New Item page to list new product!

Click on Edit button to edit product, 

Edit Page to update product!

  • Click on the Home button to take you back to the Index page for further exploration
  • Click on Delete button to remove item

Built With

This section lists any major framework/library used for this project

  • Express
  • React
  • Bootstrap
  • JavaScript
  • Node
  • Mongo/Mongoose

Getting Started

Setting up project locally, follow these simple steps

Prerequisites

 What you need to do before installing locally
 - fork and clone this repo to your terminal

Installation - CLI

1. Clone the repo
    git clone https://github.com/JustApp55/Menu-app

2. Install nmp packages
    npm init -y
    npm install

3. Install express packages
    npm i express express-react-views react@16 react-dom@16 method-override

Challenges During this Project

My original goal for the Menu app was to make this a fullstack application. Since I would like to teach myself other frontend applications, I decided to keep the frontend and backend separate, using the backend as an API for any frontend.

I decided to use React for my framework. It was part of the cirriculum at Per Scholas and a requirement for Project 3. This project was my opportunity to create a React application from start to finish.

I decided to build a backend application with Node, Mongoose, and Express, which you can view here

My next goal is to add a cart feature to the application.

Deployment

This application is deployed on heroku and it can be viewed here

Contributing

1. Fork it
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your change: git commit -am "Add some feature"
4. Push to branch: git push origin my-new-feature
5. Submit a pull request:D

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, or distribute copies of the Software.

About

The Full Stack MERN App - Frontend


Languages

Language:JavaScript 77.2%Language:CSS 15.5%Language:HTML 7.3%