Admin Side (Separate Repo: shopAdmin):
(made with React + Firebase no server deployment required, can-be hosted on CloudFlare pages, Vercel, Netlify, Firebase Hosting Etc.)
Welcome to KamiKoto, a beautifully crafted e-commerce platform offering a seamless shopping experience for stationery. This project is built using React.js and Firebase, delivering a delightful UI/UX and mobile-friendly experience for all users.
📱 Interactive screenshot slideshow - Navigate through all application features
Live Demo: kamikoto.pages.dev
- Sign In / Sign Up: Create a new account or log in using email/password.
- Google / GitHub Authentication: Sign in quickly using Google or GitHub accounts.
- Password Reset: Securely reset forgotten passwords.
- User Profile Setup: Update personal information (Profile Picture, Email, Phone, Address).
- Cart System & Payment Handling: Add products to the cart and securely process payments.
- Shipping Details: Enter shipping information for delivery.
- Mobile Friendly: Responsive design for a smooth shopping experience across all devices.
Admin Side (Separate Repo: shopAdmin):
- Manage Users: View user details (Profile Picture, Contact Info), ban users if necessary.
- Manage Products: Add, edit, or delete products with detailed information such as:
- Product Name
- Description
- Price (₹)
- Brand, Stock, and Product Type
- Primary, Secondary, Tertiary Image URLs
- Option to feature the product on the homepage
-
Clone the Repository
git clone https://github.com/itfeelsharsh/kamikoto.git cd kamikoto
-
Install Dependencies
npm install
-
Start the Development Server
npm start
-
Firebase Configuration:
- Add your Firebase project configuration in
firebase.js
. - Set up Firestore Database and Authentication in Firebase Console.
- Update Firestore security rules accordingly.
- Add your Firebase project configuration in
-
Email Configuration with Resend:
- Create a
.env
file in the root directory based on the example below. - Sign up at Resend to get your API key.
- Verify your domain in Resend dashboard for better deliverability.
- Email functionality is enabled by default unless specifically disabled.
- Add your Resend API key to the Cloudflare Pages environment variables as
RESEND_API_KEY
. - Customize your email addresses as needed.
# Email Configuration # Email is enabled by default unless set to 'false' # REACT_APP_EMAIL_ENABLED=false REACT_APP_EMAIL_FROM=orders@yourdomain.com REACT_APP_SUPPORT_EMAIL=support@yourdomain.com
The application uses Cloudflare Functions to handle email sending server-side, avoiding CORS issues. When deployed to Cloudflare Pages:
- Add the
RESEND_API_KEY
environment variable in the Cloudflare Pages dashboard. - The Functions directory contains the server-side code that handles secure API calls to Resend.
- Emails are sent through a secure server-side function rather than directly from the browser.
The application will automatically send order confirmation emails when orders are placed, and shipping notification emails when orders are shipped.
- Create a
Set up Firebase Firestore by following these steps:
-
Go to Firebase Console and enable Firestore and Authentication.
-
Set Firestore rules for secure data access:
- Go to Firestore Console and click on
Rules
tab. - Copy the rules from
firestore.rules.txt
file and paste it in the rules editor. - Click on
Publish
button to publish the rules.
- Go to Firestore Console and click on
-
For Admin Panel Access, go to Firestore and add the following field to any user you want to give admin rights:
userRole : Admin
To use the Admin Panel (shopAdmin):
-
Register as a normal user.
-
In the Firestore Console, find the user in the
users
collection and update their role:userRole : Admin (string)
-
The user can now access the admin dashboard to manage products and users.
- Optimized UI/UX: The application uses clean, modern design principles for a smooth user experience, modeled after Apple's elegant design ethos.
- Mobile-Friendly: Built with responsive design to ensure users have a great experience on both desktop and mobile devices.
- Secure Authentication: Firebase Authentication provides seamless sign-in options, including Google and GitHub for faster logins.
- Easy Product Management: Admins can quickly add, edit, or remove products with all the necessary details, including images, stock, and pricing.
- Performance-Oriented: Leveraging Firebase Firestore for fast data access and real-time updates.
- Great for E-Commerce Projects: The codebase is structured to be scalable and can be extended for various other e-commerce needs.
- Frontend: React.js
- Backend/Database: Firebase (Firestore, Authentication)
- Email Service: Resend API with Cloudflare Functions
- Deployment: Cloudflare Pages with Functions