Go to the web application ↗

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

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.

1. Clone the repository:

git clone https://github.com/guipmdev/ignite-shop-v2/

2. Change to the project directory:

cd ignite-shop-v2

3. Install the dependencies:

npm install

1. Log in/create your account at Stripe

   • Create a store, products and do all the necessary configuration

2. Get your API keys

3. Rename the file .env.local.example to .env.local and insert the necessary information:

mv .env.local.example .env.local

4. Start the web application:

npm run dev

5. 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!

↑   Return to the top   ↑