Ristorante Con Fusion: A React Website

Technology Used:

• HTML/HTML5
• CSS/CSS3
• JavaScript
• BootStrap
• ReactStrap
• React
• React-router
• Redux-toolkit

Tools Used:

• NPM: Package Manager
• WebPack
• react-scripts
• json-server

Quick Start

• 💾To clone: https://github.com/PrinceSingh19/Coursera-React-Course.git
• 💻To install: npm install
• 💻To run: npm start
• ✈️ To build: npm run build
After downloading the project start JSON server and it will serve db.json file
• To run json-server: json-server --watch jsonDataBaseName -d 2000 -p portNumber

---

To deploy the site go to: JSON server glitch repo and deploy the json server on glitch. After that change the baseUrl in shared folder's baseUrl file to the glitch link. And create a build version and deploy on netlify

Introduction

This project is based on Coursera's React Course.In this course, instructor uses the class based based approach and classic redux approach. But I have used latest version of all the dependencies and implemented using functional approach and for redux I have used redux-toolkit. This project contains application for a restaurant called Ristorante Con Fusion. This is my first react project. This react application contains reusable code components. It has various pages like Home which contains details of trending dishes and promotions available on website, About Us which describes history and leader details, Menu showing the menu items available and submitting the comments and last contact us having the form to submit the details to contact. The description of the technolgies used and their implementations is mentioned in below Project Description Section

🎯 Salient Features

1. Reusable code components
2. State management using redux-toolkit
3. get request using fetch api and redux thunk asynchronously
4. post request using fetch api and redux thunk asynchronously
5. Handling error when fetching data from server
6. React animations

📖 Project Description

The brief decription of the above mentioned technologies in the project is as follows:
React: The project uses react version 18.2. I have implemented components using both the approaches i.e. Class based and functional based.
React-router: To link the various pages in application and provide the easy navigation.
BootStrap/ReactStrap: To implement the responsive web design.
Redux-toolkit: To have centralized state management of application.
Framer-motion: To implement the eye-catiching animations in application.
JSON-server: To simulate the data fetching experience from API.
Note: To run this project open the JSON-server folder which contains db.json and public folder in which it contains images, into terminal and type json-server --watch db.json -d 2000 -p 3001 because by default npm start will use the port 3000.

✏️ Learnings From this Project

• Intro to React Fundamentals and React virtual dom
• Implentation of React Class Based Components and Function based Components
• State management with react hooks
• Centralised stated management of application using redux-toolkit
• React router to implement navigation between pages
• Animating react components using framer-motion

Credits

Coursera, Jogesh K Muppala

Feel free to connect with me on linkedIn and github.