Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/celiovjunior/ignite-shop
(front-end) E-commerce built with Next.js, using Stripe API to show products and check-out feature. Project made during the Ignite Bootcamp, provided by programming school Rocketseat.
https://github.com/celiovjunior/ignite-shop
css html javascript next nextjs react shop ssr stripe
Last synced: 4 days ago
JSON representation
(front-end) E-commerce built with Next.js, using Stripe API to show products and check-out feature. Project made during the Ignite Bootcamp, provided by programming school Rocketseat.
- Host: GitHub
- URL: https://github.com/celiovjunior/ignite-shop
- Owner: celiovjunior
- Created: 2023-01-11T14:42:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T11:14:18.000Z (4 months ago)
- Last Synced: 2024-07-11T12:45:49.588Z (4 months ago)
- Topics: css, html, javascript, next, nextjs, react, shop, ssr, stripe
- Language: TypeScript
- Homepage:
- Size: 1.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Ignite Shop
## About:
Front-end web app of an e-commerce built with NextJS and Tailwind, consuming API with registered data in the Stripe platform, integrated with check-out feature.
### Homepage:
### Item details:
### Cart modal:
## Main tools:
- [NextJS](https://nextjs.org/) ```(v13)```;
- [Typescript](https://www.typescriptlang.org/docs/) ```(v4.6)```;
- [Axios](https://axios-http.com/) ```(v1.2)```;
- [Stripe](https://stripe.com/) ```(v11.6)```;
## User actions:
- Can see a list of products;
- Can see more details about each item, as price and description;
- Can add a product to the cart by the homepage;
- Can add a product to the cart by the details page;
- Can see a list of products already in the cart;
- Can complete the payment through Stripe's API;
## Package manager:
- [npm](https://www.npmjs.com/) ```(v9.5)```;
## Running locally:
> Before installing the project, certificates that you have [Node](https://nodejs.org/en) and [GIT](https://git-scm.com/) installed in your PC.
1. Open your teminal.
2. Execute the following command:
```shell
# clone the repository:
git clone [email protected]:celiovjunior/ignite-shop.git
# go to the project directory:
cd ignite-shop
# install necessary dependencies:
npm install
# open the project folder:
explorer.exe .
```
3. Copy and paste the ```.env.sample``` file in the same directory;
4. Rename the new file with just ```.env```;
5. Paste your Stripe's credential, like the example below:
```bash
# Stripe's credential
NEXT_PUBLIC_STRIPE_SECRET_KEY=
# Localhost url
http://localhost:3000
# Stripe's credentials
NEXT_PUBLIC_STRIPE_SECRET_KEY=
# Local running URL
NEXT_URL=
```
6. Save the file;
7. Run the following command:
```shell
npm run dev
```
Web application will run at http://localhost:3000