Admin Side (Separate Repo: shopAdmin):

(made with React + Firebase no server deployment required, can-be hosted on CloudFlare pages, Vercel, Netlify, Firebase Hosting Etc.)

KamiKoto - Stationery E-Commerce Web App

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.

📸 Application Screenshots

<iframe src="https://kamikoto-admin-screenshots.pages.dev/" width="100%" height="600" frameborder="0" style="border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); max-width: 1000px;"></iframe>

📱 Interactive screenshot slideshow - Navigate through all application features

Live Demo: kamikoto.pages.dev

---

🌟 Features

User Side:

• 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

---

🚀 Getting Started

Setup & Installation

1. Clone the Repository

   git clone https://github.com/itfeelsharsh/kamikoto.git
   cd kamikoto

2. Install Dependencies

   npm install

3. Start the Development Server

   npm start

4. Firebase Configuration:

   • Add your Firebase project configuration in firebase.js.
   • Set up Firestore Database and Authentication in Firebase Console.
   • Update Firestore security rules accordingly.

5. 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:

   1. Add the RESEND_API_KEY environment variable in the Cloudflare Pages dashboard.
   2. The Functions directory contains the server-side code that handles secure API calls to Resend.
   3. 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.

---

🛠 Firebase Firestore Configuration

Set up Firebase Firestore by following these steps:

1. Go to Firebase Console and enable Firestore and Authentication.

2. 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.

3. For Admin Panel Access, go to Firestore and add the following field to any user you want to give admin rights:

   userRole : Admin
   

---

⚡️ Admin Panel Access

To use the Admin Panel (shopAdmin):

1. Register as a normal user.

2. In the Firestore Console, find the user in the users collection and update their role:

   userRole : Admin (string)
   

3. The user can now access the admin dashboard to manage products and users.

---

📝 Notes

• 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.

---

🧑‍💻 Tech Stack

• Frontend: React.js
• Backend/Database: Firebase (Firestore, Authentication)
• Email Service: Resend API with Cloudflare Functions
• Deployment: Cloudflare Pages with Functions