This project is a Book Shop ecommerce site developed in React with TypeScript, using Vite and JSON-Server to simulate a local product API.
This project has helped me put into practice everything we have learned. It has been very interesting to iterate the versions of the project and make it grow while I assimilated new knowledge. This has meant that I had to keep doing, redoing and fighting with the code. The project utilizes TypeScript and leverages Vite for fast code compilation, and JSON-Server to simulate a locally stored product API.
- Browsing and purchasing Books.
- Searching and filtering Books.
- Shopping cart management.
- Login management
To run the project, you need to have the following requirements installed:
- Node.js
- pnpm (or npm)
- Vite
- JSON-Server
Follow these steps to install the project:
- Clone the repository:
git clone https://github.com/ebroto7/assembler-ecommerce.git- Navigate to the project directory:
cd react-ecommerce-typescript- Install the dependencies:
pnpm installTo run the project, follow these steps and commands:
- Create a
.envfile in the root of your project with the following content:
VITE_API_BASE_URL=http://localhost:3000/booksAdditionally, you can find an example of the .env file in the config folder named env.example. This file serves as a template for your configuration.
- Run JSON server:
pnpm run json-server-
Resources http://localhost:3000/books
-
LandingPage http://localhost:3001
- Run the development server:
pnpm run devAccess the project through your browser at http://localhost:5173.
HTML, CSS TypeScript React Vite JSON-Server Prop-drilling useState, useEffect Conditionals and error handling React Router useContext Inputs and forms Async/Await AXIOS React Router with dynamic and private routes useParams, useRef, useId, custom hooks useReducer include external libraries react icons Boostrap
other libraries that I have played with but ultimately they are not part of the project
react confetti tailwindcss react-hot-toast
The truth is that it has been a very challenging project, since it was impossible to foresee all the tasks to be carried out and how to carry them out without having knowledge of react. At the outset, I proposed the project using the 'clickUp' tool where I added the main tasks. Even so, everything was increasing as I went along, seeing what possibilities react offered me and what I was capable of applying. As everything was growing as I went, I had constantly having to remake designs, propose functionalities, implement them looking for better methods, adding and removing libraries, etc. This has also forced me to exponentially improve my skills with GitHub because I constantly had to play with branches creating, modifying, going back, undoing changes, etc. I have to say that, although there were many ideas in the pipeline and that there are things that can be improved, I am very proud of how the project has finally turned out and, above all, everything I have learned! Of how I have had to look for myself life to find everything I didn't know how to do, ask for help in very specific moments of blockage. To be constant and fight until the end to resolve conflicts. To control frustration, there have also been moments for that. To celebrate successes and a long etcetera