DigiStore is an e-commerce platform built with Strapi as the backend CMS, utilizing Clerk for authentication, Stripe for payments, and Resend for email services. The frontend is powered by Next.js, providing a fast and responsive interface for browsing, searching, and purchasing products.
- Product Catalog: Browse products with categories, prices, and images.
- Search and Filter: Search products and filter by category.
- User Authentication: Sign up, login, and account management with Clerk.
- Payment Integration: Secure checkout and payments powered by Stripe.
- Order Notifications: Email notifications via Resend for order updates.
- Frontend: Next.js, TypeScript, React
- Backend: Strapi CMS
- Authentication: Clerk
- Payments: Stripe
- Email Service: Resend
- Hosting: Vercel for frontend, Render for Strapi backend.
Check out the live version of DigiStore at: DigiStore Live
- A modern web browser with JavaScript enabled.
- Visit the live demo link above.
- Sign up or log in to your account.
- Browse and search products in the catalog.
- Add items to your cart and proceed to checkout.
- Complete the purchase using Stripe's secure payment gateway.
- Receive email confirmation and updates on your order.
- Node.js (version >= 14)
- Yarn or npm
- Accounts for Clerk, Stripe, and Resend services (API keys required)
-
Clone the Repository
git clone https://github.com/your-username/DigiStore.git cd DigiStore -
Install Dependencies
- For the frontend:
cd client npm install- For the backend:
cd server npm install -
Environment Variables
- Create .env.local in both client and server folders based on .env.example.
- Fill in environment variables, such as API keys for Clerk, Stripe, and Resend, and database URLs.
-
Running the Application
- For the frontend:
cd client npm run dev- For the backend:
cd server npm run develop -
Access the Application
-
Frontend:
http://localhost:3000 -
Backend (Strapi):
http://localhost:1337/admin
-
-
Database Setup
- The backend requires a database (e.g., PostgreSQL or SQLite for local development).
- Configure the database connection in the .env file in the server folder.
NEXT_PUBLIC_CLERK_FRONTEND_API: Your Clerk frontend API keyNEXT_PUBLIC_STRAPI_API_URL: Backend URL for Strapi APINEXT_PUBLIC_STRIPE_PUBLIC_KEY: Your Stripe public key
STRAPI_ADMIN_JWT_SECRET: JWT secret for Strapi AdminDATABASE_URL: Database connection URLSTRIPE_SECRET_KEY: Your Stripe secret keyRESEND_API_KEY: Your Resend API key for email notifications
In the Strapi backend configuration, ensure CORS settings allow requests from the frontend domain (e.g., https://digi-store-alpha.vercel.app).
- Admin: Can manage products, categories, orders, and user accounts.
- Customer: Can browse products, make purchases, and manage their account.
GET /api/products: Retrieve all products with optional query filters.GET /api/products/:id: Retrieve product details by ID.POST /api/orders: Create a new order.after payment completion.POST /api/auth: User login and registration with Clerk.POST /api/carts: Add items to the cart.GET /api/carts: Retrieve cart items for the current user.DELETE /api/carts/:id: Remove an item from the cart.
- ProductList: Renders the list of products with details.
- SearchBar: Allows users to search and filter products.
- Checkout: Integrates Stripe for handling payments.
Contributions are welcome! Please follow these steps:
- Fork the project repository.
- Create a new branch with a descriptive name.
- Commit and push your changes.
- Open a pull request for review.
Note: This project currently uses a static email address for sending emails due to the lack of a custom domain setup.