Short Explanation
After a visit to China, I noticed a new trend of origami and paper folding kits. There were multiple stores selling ornate finished pieces, and DIY kits that were very popular with tourists. I identified a gap in the market for an online store that sold similar products in the US. I created Foldy Friends to fill that gap, and provide a fun and creative outlet for people of all ages. This also allowed me the perfect opportunity to build a full stack e-commerce site using NextJS, Firebase, and Vercel.
Demo Video
Here is a short video demo of the Foldy Friends website and its features:
Project Goals
The goal of this project was to familiarize myself with NextJS, after using vanilla React for a number of years. I wanted to build a full stack e-commerce site that would allow me to learn more about server-side rendering, static site generation, and SEO optimization. Coming from WooCommerce, and my previous expereince with my MaleQ business, I wanted to build a site that was more lightweight and easier to maintain.
Tech Stack Used
- NextJS: I chose NextJS for its speed and ease of use, as well as its support for server-side rendering and static site generation in order to make my site discoverable via SEO.
- TypeScript: I chose TypeScript for its type checking and ability to catch errors early, and to improve the overall maintainability of my code.
- Firebase: I chose Firebase for its ease of use and flexibility, as well as its support for real-time data synchronization and user authentication.
- Vercel: Vercel was a great fit thanks to its speed and reliability, and simple deployment process. As my site is relatively small, with low traffic, Vercel was an easy, cost effective solution.
- DaisyUI: DaisyUI is a component library for Tailwind CSS that I used to quickly build and style components for the Foldy Friends website. I chose DaisyUI for its ease of use and flexibility, as well as its support for a wide range of components and utilities.
- Stripe API: Stripe was an easy fit for my project as a payment processing platform that allows me to accept payments. I chose Stripe for its ease of use and flexibility, as well as its support for secure payment processing and fraud prevention.
Features
Below are some of the key features of the Foldy Friends project:
- Social Login: Allow users to sign in with their Google or Github accounts.
- Mobile Responsive: Ensure the site is fully responsive and accessible on all devices with a mobile-first design and TailwindCSS.
- Product Tags and Categories: Allow users to filter products by tags and categories to find the perfect folding kit.
- Price and Sorting Filters: Allow users to sort products by price, popularity, and newness to find the best deals.
- User Reviews: Allow users to leave reviews and ratings for products they have purchased.
- Admin Dashboard: Allow admins to manage products, orders, and users from a centralized dashboard.
- Light and Dark Mode: Allow users to switch between light and dark mode to customize their browsing experience.
Future Plans
- Wishlist: Allow users to save products to their wishlist for later purchase.
- Order History: Allow users to view their order history and track the status of their orders.
- Search Functionality: Allow users to search for products by name, category, or tag.
I plan to continue working on the Foldy Friends project and add new features and improvements based on user feedback and my own ideas for how to make the site even better. I hope that the site will help others discover the joy of origami and paper folding, and provide a fun and creative outlet for people of all ages.