Web app for digital equipment store "Techstore" includes landing page, product pages, cart and includes payment system. I've been doing this project to improve my skills working with App Router in Next.js and Redux Toolkit. Main focus is frontend part, so there is no DB included.
Main used technologies:
- Next.js 14 (App router)
- NextAuth (Google & GitHub authorization)
- Stripe (Payment system)
- Redux (State management library, redux-persist is also used)
- TailwindCSS (Styling)
- Framer Motion (Animation)
App was deployed to Railway. You can see demo here.
Note: access to wishlist & card pages is available only for authorized users. To test payment system you can use these test cards numbers.
- SignIn with Google or GitHub account
- Store landing page with slider
- Provide categories pages & single product page
- Add product to cart or wishlist
- Persist cart data & wishlist data in local storage
- Card payment process with Stripe
- Bill generating for payment
- Fully responsive UI
- SEO optimization provided
- Client error handling with user notification
- Step 1: Install all dependencies
npm i - Step 2: Create .env file and add necessary variables (follow
env.examplefile). Note that you need to setup urls in your Google Console and GitHub application to provide authorization. - Start the app
npm run dev(next-env.d.ts should be generated automatically during build)
- Store user & order data in DB (for full Backend implementation).
- Animate delete item from cart & wishlist would be cool.
- Provide custom sign in page due to website design.
Here some screenshots of website if you are lazy to check demo or it doesn't work 😊
 |
 |
|---|---|
 |
 |