This project is a web application developed in Next.js and TypeScript for a fictitious online store that displays its products on the home page in a carousel format, allowing users to view the details by clicking on them and make the payment via Stripe. It also has a shopping cart and a success page that displays the details of the items purchased.
The goal of Ignite Shop V2 is to provide an even more user-friendly and visually appealing shopping experience, now with a shopping bag for storing multiple items, by integrating with a popular payment processor to simplify the purchasing experience for customers.
👕 See all available clothing items easily
👀 See more details by clicking on the desired product
🛒 Add the items you want to the cart
🔄 Your cart is stored until you close the order, so you can refresh the page with no worry
💳Pay via Stripe (only symbolic)
🚚 Wait for your purchases to arrive
ignite-shop-v2.mp4
The layout of the application was designed by Rocketseat and is available on Figma.
The following tools were used to build the project:
* See the package.json file
Before you begin, ensure that you have the following tools installed on your machine: Git, Node.js. It's also good to have an editor to work with the code, such as VSCode.
- Clone the repository:
git clone https://github.com/guipmdev/ignite-shop-v2/- Change to the project directory:
cd ignite-shop-v2- Install the dependencies:
npm install-
Log in/create your account at Stripe
- Create a store, products and do all the necessary configuration
-
Get your API keys
-
Rename the file
.env.local.exampleto.env.localand insert the necessary information:
mv .env.local.example .env.local- Start the web application:
npm run dev- Access http://localhost:3000/ to view the application
This project is licensed under the terms of the MIT license. See the
LICENSE file for additional info.
- Many thanks to Rocketseat for the layout and tips when putting this project together
Made with 💙 by @guipm.dev - Feel free to contact me!