Beanbag Coffee Co. E-Commerce Online Store

Beanbag Coffee Co. is a headless e-commerce solution that provides a flexible framework for building custom e-commerce platforms. It offers features such as GraphQL API, server-side rendering, payment integrations, multi-currency support, and many others. The Beanbag Coffee Co. e-commerce project is a fully functional online store that allows customers to browse and purchase a variety of coffee products ranging from whole beans to ground coffee.

This website is designed to be user-friendly and visually appealing, providing customers with an enjoyable shopping experience. The project uses MedusaJS as its core framework combined with other technologies such as NextJS for front-end development, Node.js for server-side rendering and PostgreSQL for the DB. This stack was chosen because it enables fast development of scalable applications while also offering performance benefits.

Demo

✨ Live Site

Technologies Utilized

• HTML5 - is the fifth and current major version of HTML (HyperText Markup Language), the standard coding language used to build and design web pages. Introduced in 2014 by the World Wide Web Consortium (W3C), HTML5 includes new syntactical features that make it more efficient and powerful compared to earlier versions. It supports multimedia, graphical content, and better semantic capabilities, which allow for clearer code and improved accessibility.

• CSS3 - stands for Cascading Style Sheets Level 3. It's the latest evolution of the CSS language which defines styles for web pages, including design, layout and variations in display for different devices and screen sizes. CSS3 introduces a range of new features and capabilities aimed at improving the aesthetics and functionality of web content.

• TypeScript - is an open-source programming language developed and maintained by Microsoft. It is a superset of JavaScript, adding optional static typing and class-based object-oriented programming to the language.

• ReactJS - commonly known as React, is a powerful and widely-used JavaScript library for building user interfaces, particularly single-page applications where a fast and interactive user experience is essential.

• Next.js - enables you to create full-stack Web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds.

• PostgreSQL - is an advanced, open-source object-relational database system known for its robustness, scalability, and ability to handle large volumes of data. It supports both SQL (relational) and JSON (non-relational) querying.

• TailwindCSS - is a utility-first CSS framework for rapid UI development. Unlike traditional CSS frameworks which provide predefined components, Tailwind allows developers to style their applications with low-level utility classes directly in the HTML, enabling high customizability and faster styling processes.

• Figma - is a cloud-based design and prototyping tool used for creating user interfaces, interactive prototypes, and collaborative workflow designs. It enables designers to work together in real-time on the same files and projects. Figma is popular among UI/UX designers for its versatility, ease of use, collaboration features, and compatibility across various platforms.

Features

• Product Catalog Management: The first step in setting up an e-commerce platform is creating a product catalog that includes all the available products or services offered by the company. Using MedusaJS's GraphQL API, developers can easily create product schemas for various types of products such as whole bean bags or ground coffee packs.

• User Authentication: To ensure security and personalized shopping experiences, user authentication is implemented using JWT (JSON Web Token). This allows users to create accounts, log in securely to access their profile data and order history.

• Shopping Cart: Customers can add products to their shopping cart while browsing through the website and have the option to edit or remove items before proceeding to checkout.

• Checkout Process: The checkout process is a crucial part of any e-commerce platform, and MedusaJS makes it easy to integrate different payment gateways. Customers can choose their preferred payment option and complete their purchase securely.

• Multi-Currency Support: As Beanbag Coffee Co. targets customers globally, the project includes multi-currency support using MedusaJS's currency conversion feature. This allows customers from different countries to view prices in their local currency.

• Order Management: All orders are managed through the Medusa dashboard, where admins can track order status, manage inventory levels, and process refunds if needed.

Challenges

One major challenge while building this project was integrating the GraphQL API with React for seamless data communication between the front-end and back-end. However, with thorough documentation provided by MedusaJS and its active community support, this was overcome successfully. Another challenge was implementing server-side rendering for improved performance and SEO optimization. With MedusaJS's built-in server-side rendering capabilities powered by Next.js, this could be achieved seamlessly without much effort.

Solutions

• Platform Migration: Migrated existing product listings and customer data from old systems to leverage Medusa’s headless architecture.
• Customized Shopping Features: Developed interactive UI enhancements using React on top of the headless commerce functionality provided by Medusa.
• Secure Payment Gateway Integration: Ensured secure transactions with integrated payment options optimized for speed and protection against fraud.

Screenshots

Home Page Landing Page One Landing Page Two Product Page Checkout Page

Prerequisites

• NPM >=8.0.0
• node >=17.0.0

Install

npm install or yarn

rename .env.local.template to .env.local and replace the environment key values with your own. You will need both an emailjs and a cloudinary account and the appropriate public keys.

Usage

Development Mode -

Windows:

npm run dev-windows or yarn dev-windows

Linux/Docker:

npm run dev or yarn dev

Production Mode -

Build:

npm run build or yarn build

Windows:

npm run start-windows or yarn start-windows

Linux/Docker:

npm run start or yarn start

Author

👤 Joshua Lehman

Portfolio

• https://joshlehman.ca

GitHub

• @joshl26

LinkedIn

• @joshrlehman

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2024 Joshua Lehman.
This project is MIT licensed.

---