Shop101

This is a fully functional e-commerce website with a well detailed and simple UI built with Next.js. I tried as much to model a real ecommerce website, with most functionality included from filtering products functionalities etc to checkout with Stripe.

Live demo is here.

💻 Tech Stack Used

• Language: TypeScript
• Framework: Next.js
• Data: Fake Store API
• State Management: React ContextApi
• Payment Gateway: Stripe
• Styling: Vanilla CSS
• UI Library: Material UI
• Illustrations: Freepik
• Icons: FontAwesome
• Animations: Framer Motion
• Linting: ESLint
• Code Formatting: Prettier
• Deployment: Vercel

Preview

Note: For the checkout page, you can test with a fake credit card number e.g for stripe default test card number 424242424242424, the rest field can be random

Continued development

I might consider adding user authentication and an admin panel to manage products.

export const JustAnotherProject = () => {
  return <>🎉</>;
};

Author

• LinkedIn - Let's connect 🔗
• Website - Here

Acknowledgement

I will like to acknowledge @onderonur, i took some design inspiration from his Next-shopper project.