{"id":19571518,"url":"https://github.com/rodrigofontesdev/shop","last_synced_at":"2026-04-16T18:46:10.771Z","repository":{"id":246793012,"uuid":"822202314","full_name":"rodrigofontesdev/shop","owner":"rodrigofontesdev","description":"An online store to buy t-shirts and pay with Stripe, built with Next.js.","archived":false,"fork":false,"pushed_at":"2024-08-10T22:47:08.000Z","size":1348,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-09T03:13:24.005Z","etag":null,"topics":["nextjs","stitches","stripe","study-project","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rodrigofontesdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-30T15:09:22.000Z","updated_at":"2024-08-11T16:01:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"a23cd0d2-c103-46b5-8274-9c7539a83f6e","html_url":"https://github.com/rodrigofontesdev/shop","commit_stats":null,"previous_names":["rodrigofontesdev/shop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodrigofontesdev%2Fshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodrigofontesdev","download_url":"https://codeload.github.com/rodrigofontesdev/shop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240840032,"owners_count":19866164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","stitches","stripe","study-project","typescript"],"created_at":"2024-11-11T06:19:08.959Z","updated_at":"2026-04-16T18:46:05.696Z","avatar_url":"https://github.com/rodrigofontesdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![cover](https://github.com/user-attachments/assets/16fd9822-3090-4d14-8c33-241dad22f8be)\n\n# Ignite Shop\n\nA t-shirt store where you can find and buy unique and stylish designs.\n\nThe goal is to develop an application using the Next.js framework and understand concepts such as SPA, server-side rendering (SSR), and static site generation (SSG).\n\n## Prerequisites\n\n- Node.js\n- Git\n- Stripe\n\n## Getting Started\n\n- Clone the repository (`git clone git@github.com:rodrigofontesdev/shop.git`)\n- Install dependencies (`npm install`)\n- Copy .env.example file (`cp .env.example .env.local`)\n- Add Stripe public and secret keys to the .env.local file. Refer to the [How to Use](#how-to-use) section for details\n- Run application (`npm run dev`)\n\n## Features\n\n- List products\n- Buy a product\n- Pay via Stripe Checkout\n\n## How to Use\n\n### Configure Stripe Account\n\n1. Go to https://dashboard.stripe.com, sign in to your Stripe account\n2. Change the environment to **TEST MODE** and create a new account\n3. Go to [developers page](https://dashboard.stripe.com/test/developers), and select **\"API Keys\"**\n4. Copy both the **public and secret keys**. Paste them into the .env.local file\n\n### Create Products\n\nUnfortunately, Stripe doesn't provide a way to import products, so you have to create them manually. Below, I share a table with some product data that you can use. However, feel free to create your own products, just remember to choose the **\"one-off\"** payment type.\n\nGo to the [product catalog page](https://dashboard.stripe.com/test/products) and start adding a new product.\n\n| Name | Description | Image | Price | Payment |\n| ------------- | ------------- | ------------- | ------------- | ------------- |\n| Camiseta Igniter Aboard | As soft as a hug, our products are made with the purest Brazilian cotton, perfect for climates from North to South. All colors are 100% cotton, except for the heathers which are 88% cotton and 12% polyester. | [igniter-aboard.png](/src/assets/products/igniter-aboard.png) | 79.90 | one-off |\n| Camiseta Ignite Lab | As soft as a hug, our products are made with the purest Brazilian cotton, perfect for climates from North to South. All colors are 100% cotton, except for the heathers which are 88% cotton and 12% polyester. | [ignite-lab.png](/src/assets/products/ignite-lab.png) | 89.90 | one-off |\n| Camiseta Maratona Explorer | As soft as a hug, our products are made with the purest Brazilian cotton, perfect for climates from North to South. All colors are 100% cotton, except for the heathers which are 88% cotton and 12% polyester. | [maratona-explorer.png](/src/assets/products/maratona-explorer.png) | 69.90 | one-off |\n| Camiseta Maratona Explorer 2.0 | As soft as a hug, our products are made with the purest Brazilian cotton, perfect for climates from North to South. All colors are 100% cotton, except for the heathers which are 88% cotton and 12% polyester. | [maratona-explorer-20.png](/src/assets/products/maratona-explorer-20.png) | 74.90 | one-off |\n\n### Buy a Product\n\nOnce you've created the products, return to the project homepage, select a product, and click the green **\"Buy\"** button. You will be redirected to Stripe Checkout, fill in your email and provide a card to simulate a payment.\n\n\u003e [!IMPORTANT]\n\u003e To simulate a payment, Stripe provides test cards, such as `4242 4242 4242 4242` for a successful transaction. See [other cards options here](https://docs.stripe.com/testing?testing-method=card-numbers#cards).\n\n## I've Learned\n\n- Undestand differences between SPA, SSR and SSG\n- When to choose Next.js for a project\n- Create routes using the Pages Router\n- Create API routes and how to fetch data on the server side\n- Understand the differences between `getStaticProps()`, `getStaticPaths()`, and `getServerSideProps()`\n- Image Optimization (`next/image`)\n- Metadata and SEO (`next/head`)\n\n## Built With\n\n- Next.js\n- TypeScript\n- Stitches\n- Stripe\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigofontesdev%2Fshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodrigofontesdev%2Fshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodrigofontesdev%2Fshop/lists"}