Pizza Time: A delicious online experience. I designed and developed an e-commerce platform for this pizza restaurant, featuring an interactive menu with a variety of options including pizza, sushi, and pasta. Simplifying the online ordering process and providing a seamless user experience was the key goal of this project
Live Version:
- Getting Started with Create React App
- Available Scripts
- Used Dependencies
- Goals
- Plan
- User Story
- To Do
- Version 1.0
- Version 2.0
- Useful Resources
This project was bootstrapped with Create React App.
To get started you need to:
- Clone the project
- npm install
- Install listed dependencies
- Use available scripts, like npm start
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
- React Icons
- React Router DOM
- React Alice Carousel
- Leaflet Maps
- React Paginate
- uuid - Random id generator
- Tilt
- React Lazy Load
- Framer Motion
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. I will be updating the project time to time and adding information on what I did, what I learned, change of the plans and etc. Let's dive into details of this project!
When working on a big project it defininetly gets harder to have all the ideas and plans in your head. It helps a lot when you can simply write everything down and follow the to do list. In this section, I will be adding everything I want to be happening on the website, whether it's backend or frontend. Yes, eventually I will need backend as well.
As a user, I want to be able to add items to cart even if I am not logged in/registered. When navigating to the menu page, I want to see menu items that have pictures, name, ingredients, pricing. I want to be able to sort the menu by categories, as well as be able to find something specific by writing it in the search bar. I want to be able to add items to cart, indicate the amount or delete the items from the cart. In the cart section, I want to be able to see how much I have to pay total and have the possibility to navigate to payments. Before paying, I want to add a special request to my order, like, "no spicy, please".
- Create main landing page
- Carousel to header container
- Animation effect on landing page for Services & Image Grid section
- Interactivity to food categories on landing page - e.g. Pizza, Drinks, Burgers, Pasta
- Contact Form validation on main page
- Let the visitor scroll to the top of the page with one click
- Email subscribtion section
- Add accepted payments
- Smooth component loading animation
- Email Form validation on main page
- Modal window for login button
- Email & password input
- Forgot password option
- Link to registration form
- Sortable by categories - category navigation on the side
- Pizza category
- Sushi category
- Drinks category
- Pasta category
- Sale category
- Search input available Menu items have:
- Pricing
- Name
- Ingredients
- Image
- Sizings (in case of pizza)
- Add to cart button
-
Add pagination
-
Menu side-cotainer
- A single menu item page A single menu item page should include:
- An image
- Name
- Ingredients
- Price
- Ability to choose size (in case of pizza)
- Cart page
- Empty cart page Cart page should include:
- Added item
- Amount of unique items (if the same item is added several, it shouldn't repeat)
- Disable ability to change item attributes
- Ability to add/remove items
- Ability to remove all items
- Total amount of items
- Total price
- Tax amount
- Buttons to menu/order page
- Choice between order and takeaway
- Promo code input
- Grid of blog posts
- Each post contains
- Name
- Picture
- Description
- Date
- Author
- Add pagination
- Contact form with validations
- Create sub-pages:
- Menu
- Blog
- About
- Contact
- Cart
- Registration page
- Forgot Password page
- Create database or simple object for Menu
- Scroll to top when navigating to another page
- Update meta title depending on the current page
- Responsive layout
This is the first version of the project which was last updated in March 8
- Created the landing page using some pizza restaurant template. Created everything from scratch as I also wan to keep practicing HTML and CSS. Installed the React and started my first project. It all doesn't seem very difficult because I already tried working with Vue and the process looks very similar.
- There are many new things I learned:
- JSX - in React I cannot use simple HTML, I have to use JSX which stands for JavaScript XML. The JSX is translated by Babel (a JavaScript compiler), converted to plain JavaScript. There is no huge difference between JSX and HTML but there is still some. To make my life easier I just use online HTML to JSX Compiler. I started my project with simple HTMl so I had to compile everything.
- Just like in Vue, images and links work a bit differently. Maybe it also depends how I have everything organized, however src and href did not work for me as it usually does. Usually when using img src you write src="/images/myimg.png". To use an image in component I have to impoty the image first and then use it. I have to import MyImg from "../images/myimg.png" and then use src={MyImg}.
- FontAwesome also works differently, you need to install library for that which you can read more about right here.
- Finally made the navigation menu work, specifically links! It's still not 100% clear however it is the first time I heard about Routers and Link tags. I had navigation inside header which caused me a problem so if it's your first time working with React, it's much easier to have navigation menu component separately.
- Instead of JS I used TypeScript for navigation. I am not sure exactly why it wasn't working with JS and the tutorial I used was also based on TypeScript, so I decided to try it out.
- I started working with Menu page now and created an object of menu items. Working with objects is also a little but more different and it's wasn't as easy to take out the values. The best method I found is using a map method. Still have to look into this more.
-
Today I finally finished most of the clickable links. Now you are able to move to another page where only two components remain consistant - header and footer navigation. I also added functionality - everytime you move to another page you will end up at the top of the page. So, if you click on any link in footer, next page will start at the top. Previously it would start at the bottom.
-
I also added a lot of new items to menu categories. I decided not to spend too much time on content(even though I am having fun with it) and duplicated it 2x times in order to I have a lot of items on the menu. So if you see some items repeating, it was made on purpose.
-
I also had an issue with importing function as simply as I can with image, for instance. If I declared some function with const SomeFunction, for example and imported it, it didn't work. I decided to go easy way and repeat the function in several components instead. I will definitely get back to this.
-
I also moved main page components into one file. I do love having everything as separate as possible so I can understand the workflow better, however I ended up having too many files and it got messy. The components did remain separate however they are just located in the same file now.
-
Added a very easy piece of code that changes the title tag depending on the page I am on. There are more advance ways like React Helmet or React meta tags however I don't need it right now, works perfect as it is now.
- I added slider to the header section. I was planning to make it with good old JavaScript however I learned about awesome React component called React Alice Carousel. React Alice Carousel is a React component for building content galleries, content rotators and any React carousels. I didn't have spend a lot of time and code to create the carousel and it is something I will definitely will use a lot from now on. It's very easy to install and use. Feel free to check it out here and other awesome resources at the end of this file
- Today I decided to finish off some small components. I added email subscribtion section on the landing page and decided to remove about me part, it didn't look very nice with other components. I aded some information to both Contact and About me pages. I also finally added scroll to top botton on landing and menu page. Very convenient when the page is long.
- I finally managed to deploy the website! I had issue deploying it for several days because I have filed in src folder and GitHub was showing my README file instead. I used many different ways but nothing helped me right away, had to make some changes manually. Not all the guides cover neccecary information sometimes or miss out some import details, so you have to keep searching. Very funny example - when I first started learning git and github I was trying to push changes to GitHub repo right from my computer and not manually. I had to go through several articles only to find out that I missed out one detail, "git init". Not all the guides mentioned it or not all the guides mentioned that I needed to cd (change directory) in the terminal and be in the correct folder first. Here is what I did to make it work:
- Installed gh-pages (npm install gh-pages --save-dev)
- Then I created a new repository myself called gh-pages (for some reason I expected the package to create it on it's own but it didn't). I am not I remmeber how I did it, I am still learning.
- I made sure that my package.json files have these lines in scripts: "predeploy": "npm run build", "deploy": "gh-pages -d build" and separate line "homepage": "/pizza-time-with-react". Now this is where I made a misrake at first. I read that either you need to add the whole URL like https://github.com/catherineisonline/pizza-time-with-react. However it didn't work. Then I read you need to write "homepage": "." or "homepage": "/" and it didn't help either. Finally I simply wrote the name only and it helped. So it should be "homepage": "name of the repository not including (https://github.com/yourgithubusername)".
- I deleted .cache file in node modules folder but I am not 100% sure if that helped.
- Then also make sure that you need to change setting in your repository. Go to Settings > Pages > and under Source select branch called gh-pages (the one I created manually).
-
After I deployed the website, I noticed that the images were sometimes loading with slight delay. Having some experience with SEO I realized I missed the image optimization part. I have a lot of images and it's still messy with too specific names and different formats. However I still compressed some images on the landing pages and the difference was very noticable. So make sure to always compress images and much better if you do it beforehand.
-
I also added posts to blog section and used an interested library for lazy load. This one is a bit old but working fine. There are many posts and images, that's why it was loading with delay. I did compress it however seems like it was not enough.
- Today I fixed some small issues on the landing page like responsiveness and resizing of images. I added some small animations to icons.
- I also learned how to use functions inside components and added validation for newsletter and contact form on the landing page. Functions in React are very similar to Vue and when I first started Vue some time ago, it was really hard. Once, I was trying to implement some function for like 3 days, I think. Happy to see that it paid of.
- Added some responsiveness to all the pages however I am not done and probably once I finish everything I will work mostly on perfecting responsiveness as well as try to learn some basic of UX/UI design.
- I check the website on my phone via Chrome and also Safari. I have had this issue before where Safari does not support something specific. There were some small changes I needed to make to fix it. I also had to convert all pictures from avif format to jpeg. I never really worked with avif before however the images I had happened to be avif. Turned out Safari doesn't support it yet. I also compressed blog images one mroe time however for some reason it's being slow. On menu, where there are more images it's working fine. Still unsure what is causing it and I don't have much experience to test it.
- Started working on the order process including things like cart, registration/login form, adding/ removing items from cart.
- Today I fixed some small details and styles. Started working on registration and forgot password pages. I was trying to create an array of year dates and push them to the HTML however it wasn't working properly. At the end I decided to hardcode the dates however I definitely would love to try it again.
- Did some changes to responsiveness and updated some css once again. Found it more useful to check the code in Safari first as many things look fine in Chrome but not in Safari. For now, I decided to slow down on this project as my other tasks are more high level and I need more time to spend on it. I am going to use this project in my portfolio so I will get back to it time to time and improve it using my new knowledge. This is my first React project and it was definitely amazing experience.
This is the second version of the project which I started on May 20, almost 2 month after the Version 1. I am getting back to this project to remake and improve it after spending these 2 months on React. First, I will change everything to CLASS COMPONENTS because I have been mostly working on classes instead of functions and would like to keep it that way until I move on to function components. Secondly, I will add more interactivity this time, like adding items to the cart and removing it. I had a very hard time doing it last time, let's see how my learning paid off!
I created a separate file for all menu items and categories which saved me tons of space. Instead of having separate data for each category, I created just one and added the possibility to filter each of them by category. This helped me to get rid of 10 extra components! I do not want to do this now however I would gladly also make a GraphQL for this data. Now, I do not have to load different components every time I change a category. I simply render different data. This was remade to make the add to cart function and separate menu item page easier to create. Started cart interactivity by adding add to cart option on the menu page along with the attributes. This time, I added size attributes only to the pizza. The customer shouldn't be able to add items to cart until they chose size option and should be able to add products to cart if there are no attributes. Now, you can also see cart item count on navigation cart icon.
Now I have a fully functional menu that enables the customer to add products to cart and check them on a separate cart page. They can now see a message once they add the item and it's possible to do it via menu page or separate product page. On the cart page, I disabled the option to change pizza size however you add or remove the product stacked by chosen size. You can also see the total amount of the items and how much you have to pay. Due to the websier design, I decided to skip the cart overlay and made only cart page. As long as I do not have any backend, I am not going to implement too many details of real life e-commerce website.
Had some issues with adding items to cart in the cart page. Interesting thing to remember! Always add a key value to components that are repeatable. For example, if you are rendering the componentsof blog post, you need to add a unique key value to this repeating blog post component, so React can understand they are actually different blog posts. Otherwise you will end up having random issues!! I also added checkout page and fixed some minor css.
I have a lot of images on the website and I didn't think in advance when choosing them. Not all of them have similar dimensions which makes my life harder to first of all, design and second huge sizes makes images weight more and as a result delay the loading time. So, I decided to change or resize the images. Would also be perfect to have different sizes for mobile and desktop, however I decided not to hassle to much right now.
- HTML to JSX - a great tool to compile HTML to JSX.
- Lorem Ipsum - dummy text generator, there no need to think of big articles on your own.
- Leaflet - map API. It's a second project where I use it and I like it a lot. It's free and doesn't require any credit card info if you want to use it for some small projects.
- Icons8 - - very good collection of icons, in case you cannot find what you needed on FontAwesome.
- React Alice Carousel - React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.
- TinyPNG - smart lossy compression techniques to reduce the file size of your WEBP, JPEG and PNG files.
- React Lazy Load Image Component - React Component to lazy load images and other components/elements.
- React Icons - Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.