https://github.com/horberlan/ecommerce
a simple ecommerce build in Next.js with Tailwind
https://github.com/horberlan/ecommerce
Last synced: about 1 year ago
JSON representation
a simple ecommerce build in Next.js with Tailwind
- Host: GitHub
- URL: https://github.com/horberlan/ecommerce
- Owner: horberlan
- Created: 2021-12-19T23:42:25.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-12-19T23:49:17.000Z (over 4 years ago)
- Last Synced: 2025-04-04T10:11:51.658Z (about 1 year ago)
- Language: JavaScript
- Size: 10.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### [Live Version of Project](https://thehealthyfermentary.com)
### Project Description
In this project I engineered eCommerce application for a customer in process of starting a fermented beverage delivery service, designed reusable react components to enable sophisticated shopping experience while maintaining a clean codebase, conceptualized and implemented both desktop-centric and mobile-centric designs, communicated with, implemented requests from, and updated customer throughout the process from conception to present. Technologies used: React.js (Next.js), GraphQL, Styled Components, tailwindCSS, framer motion, stripe.js
🛑 **Development status:** MVP of Application developed. Increasing performance of sometimes jittery animations, refactoring codebase for increased readability and reusaability, and addition of TypeScript are among the highest development priorities going forward.
### This Project Features the Following:
- 🔥A distinct shopping cart experience Mobile and for Desktop, animated with Framer Motion
- 🔥eCommerce features including CRUD functionality for cart items
- 🔥Secure payments via Stripe.js
- 🔥Backend shopping cart validation for fraudulent transaction prevention
- 🔥Statically Generated Pages for quicker load times
- 🔥Blurred image thumbnail loading - used for better site experience for users with slow internet connections
# Technologies Used
## Superplate
>[Superplate](https://github.com/pankod/superplate) is a well-structured production-ready frontend boilerplate with Typescript, Jest, testing-library, styled-component, Sass, Css, .env, Fetch, Axios, Reverse Proxy, >Bundle Analyzer and 30+ plugin. For now, only creates projects for React and Next.js
## Framer Motion
>[Framer Motion](https://www.framer.com/motion/) A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. Proudly open source.
## TailwindCSS
>A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
>[Go To Documentation](https://tailwindcss.com/docs)
## NextJS
> "The React Framework for Production" [Next.js](https://nextjs.org/) gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
## Apollo GraphQL
>Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, >>and modify application data, all while automatically updating your UI.
>[Go To Documentation](https://www.apollographql.com/docs/react/)
## Stripe.js
>Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for online businesses of all sizes
>[Go To Documentation](https://stripe.com/docs/js)
## react-use
>A Collection of useful React hooks.
>[Go To Documentation](https://github.com/streamich/react-use)
## ESLint
> A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
> [Go To Documentation](https://eslint.org/docs/user-guide/getting-started)
## Prettier
> An opinionated code formatter; Supports many languages; Integrates with most editors.
> [Go To Documentation](https://prettier.io/docs/en/index.html)
## Strapi (Backend)
> [Strapi](Strapi.io) is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.
## MongoDB (Database)
> Classified as a NoSQL database program, [MongoDB](https://www.mongodb.com/) uses JSON-like documents with optional schemas.
## Cloudinary
> Developers and marketers use [Cloudinary](https://cloudinary.com/) to quickly and easily create, manage and deliver their digital experiences across any browser, device and bandwidth.
## License
MIT