2AMRECORDS

2AMRECORDS is a Next.js e-commerce template for an online clothing store that integrates Firebase Authentication, Firestore, and Storage with Stripe payments and runs on Vercel.

What is 2AMRECORDS?

2AMRECORDS is a Next.js web application for selling clothing online, using Firebase for user accounts, product data, and image storage, and Stripe for checkout payments. The application takes product listings, account credentials, and order requests as inputs and produces a customer-facing storefront with browsing, cart, checkout, and order-tracking flows. Hosting is handled by Vercel, and the interface is built with styled-components and CSS grids for a mobile-responsive layout.

Key Features

The storefront ships with six core building blocks: authentication, storage, database, payments, hosting, and a responsive interface.

• Firebase Authentication — Handles user registration, login, and profile management so shoppers can personalize their experience and track orders.
• Firebase Firestore — Stores product, category, and user data in a scalable, structured database.
• Firebase Storage — Hosts product images and related media files for fast, secure access.
• Stripe API — Processes payments securely and supports multiple payment options during checkout.
• Vercel hosting — Deploys the application for high availability and smooth performance.
• Mobile-responsive UI — Uses styled-components and CSS grids to create a flexible layout that works on phones and tablets.

Who is it for?

2AMRECORDS suits developers and store owners who want a working e-commerce foundation without building authentication, storage, and payments from scratch. Developers can use it as a Next.js reference project that shows Firebase and Stripe integrated into a real storefront. Independent clothing brands can adopt it as the starting point for their online store and then extend it with the features listed on the roadmap.

What can you do with it?

With 2AMRECORDS you can run a clothing storefront, shop as a customer, or study the stack in one codebase.

• Store owners: Publish a clothing catalog, let customers register and sign in, accept card payments through Stripe, and manage orders.
• Shoppers: Browse products by category, add items to a cart, check out securely, and track orders after purchase.
• Developers: Study a working integration of Next.js with Firebase Auth, Firestore, Storage, and Stripe, then customize the design or add new pages.

Development roadmap

The project's roadmap defines high-, medium-, and low-priority tasks that the maintainers plan to build next. High-priority work includes implementing dynamic routing and non-existent route handling, designing remaining UI pages, adding user registration and authentication, integrating Stripe checkout and cart management, and building a user profile page for order tracking. Medium-priority tasks cover mobile optimization, product list sliders and carousels, location-based delivery fees, and discount expiry management. Low-priority items include lazy loading images, a product feedback section, purchase confirmation emails, and removing unnecessary profile image uploads.

FAQ

What technologies does 2AMRECORDS use?

2AMRECORDS is built with Next.js and styled-components, using Firebase Authentication, Firebase Firestore, and Firebase Storage for backend services, Stripe for payments, and Vercel for hosting.

Is 2AMRECORDS fully finished?

No. The documentation separates current features from a development roadmap; several planned features, such as dynamic routing, a user profile page, and a product feedback section, are not yet implemented.

How are product images stored?

Product images and related files are hosted in Firebase Storage, which provides fast and secure access to media resources from the storefront.