This updated app has the Pangea integration implemented. Before running step 3, copy the .env.example to .env and setup those ENV values accordingly. You need to create a MySql table with the following schema:
CREATE TABLE `users` (
`id` varchar(100) NOT NULL,
`email` varchar(40) NOT NULL,
`password` varchar(40) NOT NULL,
`fullname` varchar(40) NOT NULL,
`address` varchar(100) DEFAULT NULL,
`number` varchar(100) DEFAULT NULL,
PRIMARY KEY (`id`)
)
- git clone the repo
- cd to the repo folder
- npn run server // this start the server
- npm run start // this run the client
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
- Goals
- User Story
- Used Dependencies
- Useful Resources
- Contribution
- License
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.
The main goal of this project is to get better at React and experience what it's like to work on something that feels more like a real project. In the past, I've mostly worked on small pieces of code that didn't do much on their own. With this project, I want to step into different shoes – not just as a coder, but as someone who's building something useful and someone who's going to use it.
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".
- React Icons
- React Router DOM
- React Alice Carousel
- Leaflet Maps
- React Paginate
- uuid - Random id generator
- Tilt
- React Lazy Load
- Framer Motion
- MySQL2
- 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.
- PlanetScale - serverless MySQL database
This project serves as a personal portfolio website to show off my personal skills. I do not accept any contributions like pull requests to this project however if you have any suggestions or ideas feel free to message me, send me a message via a contact form on the website, or submit an idea in the discussions. Otherwise, you are free to fork this project and change it for your own purposes.
This project is released under the MIT LICENSE. You can find the specific terms and conditions outlined in the LICENSE file. This means you're free to utilize, modify, and distribute the project according to the terms of the MIT License.
Feel free to incorporate this project into your personal portfolio! Showcase your skills and creativity by featuring your adaptations or implementations of this project. Just make sure to follow the guidelines of the MIT License while doing so. At the same time, I do not recommend copy pasting this project into your portoflio and claiming it as your own until you read the code and understand the logic or rewrite it your own logic.
Happy coding!