LiFoodie is an online restaurant website and a pwa (progressive web app) installable in any device with browser.
A family restaurant and cafe that offers online order services, is one of the most interesting projects I am planning to implement. The goal of this project is to make this restaurant landing page look almost like an actual working business. It should have all the interactivity usual e-commerce websites have.
Live Version: LiFoodie
This project was created with Create React App.
To get started you need to:
- Clone the project
- npm install
- Install listed dependencies
- Use available scripts, like npm start
The goal of this project is to learn React and become a bit closer to real life projects. Most of the projects I worked with are only small pieces that are not much useful on it's own. By doing this project I will have to think not only as a developer but as a business and a customer.
When working on a big project, it definitely gets harder to have all the ideas and plans in your head. My first choice was storing all necessary product information locally and finish the project as front-end only, but that's not enough to satisfy a big project so I learned a little bit of node, express Js and about crating own rest API.
Note: At this time I don't know much about apis so i will not share this api.
User authentication, login, registration, password recovery system was performed using Firebase Authentication and user order information and reviews are stored in Firebase Firestore.
As a user, I can add items in my cart even if I an not logged in or registered. When browsing to the restaurant page, I want to see menu items that have pictures, name, pricing and a discount option. In cart page I can add new items in cart, totally clear the cart, increase/decrease the quantity of any product or remove that product. Also, I can see the total amount I have to pay while checkout. More specifically, I found the sort summarize list of all items, my contact number, shipping address and tip menu before making payments. The system ensure that I must log in. After payment system let me write a review, but it is not mandatory. Also, while logged in I found my previous activities like my previous order and reviews. I can change my personal details (name, contact number, email, shipping address) anytime.
react-toastify
react-typing-effect
react-parallax
react-parallax-tilt
axios
react-router-dom
tailwindcss
mui
swiper
pixabay
Project Server : firebase
Api Server : heroku
It is hard to say but sometimes this project is totally crashed on Firefox browser but there is no issue on browser like Chrome, Edge and Safari etc. I have no idea why. Its show some wired error on console, has no solution on web too. If you are a react pro and willing to fix my project, you are welcome. Any type of help will be appreciated from bottom of my heart.