This is an online shop of a German brewery startup in Berlin. This store allows its customers to learn about brewing and purchase its newest beer in the market.
Link to the online shop: https://nurbier.vercel.app/
Link to the frontend's repo: https://github.com/hiluan/ecommerce-fullstack-NUR-BIER-frontend
Link to the backend's repo: https://github.com/hiluan/ecommerce-fullstack-NUR-BIER-backend
Tech used: Next.JS React.JS, Strapi, GraphQL, Cloudinary, Auth0, Redux, HTML, CSS, JavaScript, Styled Component, Framer Motion, Heroku, Vercel, Stripe, Paypal
- Frontend with Next.Js, Styled Components, Framer Motion, Toast:
- Next.Js: Javascript framework.
- Styled Components: manages all CSS stylesheets.
- Framer Motion: helps create animated effects.
- Backend with Strapi (Node.Js), Cloudinary, Auth0, Stripe and Paypal APIs:
- Strapi: Clients can create/edit/delete their products on Strapi with its friendly UI for their convenience. Strapi then gives out an API to sync all products on the Web App.
- Cloudinary: every time a new product is created on Strapi, all of its photos will be automatically uploaded to Cloudinary. These photos will be optimized to different sizes: thumbnail, small, medium, large, etc. for our convenience.
- GraphQl: uses query to pull out specific data from Strapi.
- Auth0: works together with Strapi on the Backend to authenticate users' logins. Auth0 offers login for email, Google, Facebook, Twitter, etc.
- Stripe and Paypal APIs are for payments with Cards and Apple Pay, Google Pay integrated.
- Navigation Bar:
Other than navigating from/to different pages on the site, there are 2 special buttons:
- Login / Sign Up: When clicking on it, the login page (from Auth0) will show up. After signing up and/or logging in, users can view their order histories by clicking on the same button which is now ‘My Account.’
- Cart: Clicking on it will open the cart for customers to check the current state of their shopping bag.
- Home Page:
-
Products can be added to the cart directly from the Home Page. The product detail page can be accessed by clicking on any of the items.
-
News and new products are introduced here.
-
Chosen reviews of customers will be displayed here.
- Product Page:
- Display product detail in a simple but elegant way.
- Quantity is edited before adding to cart.
- Checkout Page:
- Check out with Stripe: Payment methods can be varied from Credit/Debit Card to Apple/Google Pay.
- Check out with Paypal: still under construction.
- Login Page:
- Auth0 handles this page. It lets customers choose either to use their email or other services like Google, Facebook, Twitter, etc.
- Other Pages:
- Contact Page: Lets customers keep in touch with customer service.
- About Page: Lets customer learn about Nur Bier.
- Works well as a Mobile first / Responsive Website.
- Responsive CSS on iOS devices has problems with Parallax.
- Still in the testing phase. This section will be updated soon.
- Next.Js handles router-dom well.
- Payment with Stripe is colorful and there are many options to choose to put on customers' order histories or receipts.
- Framer Motion is hard but pretty fun and it helps create beautiful effects on the website.
- Working directly with clients is not easy. More communication should be made for both sides to understand each other.
- Still in the testing phase. This section will be updated soon.
Take a look at these couple of examples that I have in my own portfolio:
hiluan.dev - Portfolio Page https://github.com/hiluan/hiluan-frontend
starlite.netlify.app - Online Trading Platform https://github.com/hiluan/starlite-frontend
Strapi comes with a full featured Command Line Interface (CLI) which lets you scaffold and manage your project in seconds.
Start your Strapi application with autoReload enabled. Learn more
npm run develop
# or
yarn develop
Start your Strapi application with autoReload disabled. Learn more
npm run start
# or
yarn start
Build your admin panel. Learn more
npm run build
# or
yarn build
Strapi gives you many possible deployment options for your project. Find the one that suits you on the deployment section of the documentation.
- Resource center - Strapi resource center.
- Strapi documentation - Official Strapi documentation.
- Strapi tutorials - List of tutorials made by the core team and the community.
- Strapi blog - Official Strapi blog containing articles made by the Strapi team and the community.
- Changelog - Find out about the Strapi product updates, new features and general improvements.
Feel free to check out the Strapi GitHub repository. Your feedback and contributions are welcome!
- Discord - Come chat with the Strapi community including the core team.
- Forum - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
- Awesome Strapi - A curated list of awesome things related to Strapi.
🤫 Psst! Strapi is hiring.