Skip to content

Latest commit

 

History

History
146 lines (116 loc) · 4.88 KB

README.md

File metadata and controls

146 lines (116 loc) · 4.88 KB

🛒 Ecom/FetanGebeya - an E-Commerce Web App

E-Commerce Web App

Ecom is An elegant and performant full-stack e-commerce platform built to showcase modern web technologies and provide a seamless shopping experience with ease and simplicity. 🚀

🌟 Features

  • Frontend: Built with Next.js for server-side rendering and fast client-side navigation.
  • Styling: Beautiful and responsive design using Tailwind CSS.
  • Backend: API server powered by Express.js for a robust and scalable backend.
  • Database: Data stored in a PostgreSQL database using Prisma ORM for type-safe database queries.
  • Authentication: Secure and hassle-free user management with Clerk.
  • Payments: Stripe integration for handling payments securely.
  • Image Uploads: Effortless image hosting powered by UploadThing.
  • Hosting:

🛠️ Technologies Used

Technology Purpose
Next.js Frontend framework
TypeScript Type-safe development
Tailwind CSS Styling
Express.js Backend framework
PostgreSQL Relational database
Prisma ORM Database ORM
Clerk Authentication
Stripe Payment processing
UploadThing Image upload service
Vercel Frontend hosting
Render Backend hosting
Neon Database hosting

🚀 Getting Started

Follow these steps to set up the project locally:

Prerequisites

  • Node.js installed
  • PostgreSQL database set up
  • API keys and credentials for Clerk, UploadThing, Neon, etc.

Installation

  1. Clone the repository:

    git clone https://github.com/kaleb110/ecom.git
cd ecom

  2. Install dependencies for both frontend and backend:

    cd ./frontend
npm install
cd ./backend
npm install

  3. Set up environment variables:

    • Frontend: Create a .env.local file in the frontend directory with: 
      NEXT_PUBLIC_CLERK_FRONTEND_API=<your-clerk-api-key>
UPLOADTHING_TOKEN=<your-uploadthing-token>
    • Backend: Create a .env file in the backend directory with: 
      DATABASE_URL=<your-neon-database-url>
PORT=<5000 or any other port>
CLERK_API_KEY=<your-clerk-api-key>
CLERK_SECRET_KEY=<your-clerk-secret-key>
CLIENT_URL=<your-front-end-url(http://localhost:3000)>
SECRET_KEY=<your-stripe-secret-key>

  4. Start the development servers:

    • Frontend: 
      cd frontend
npm run dev
    • Backend: 
      cd backend
npm run dev

  5. Access the app:

    • Frontend: http://localhost:3000
    • Backend API: http://localhost:5000

🏗️ Project Structure

.
├── frontend/        # Next.js frontend
│   ├── components/  # Reusable UI components
│   ├── app/         # Next.js routes or pages
│   ├── types/       # typescript declarations
│   └── ...          # Other frontend files
├── backend/         # Express.js backend
│   ├── src/         # API endpoints
│   ├── prisma/      # Prisma schema and migrations
│   └── ...          # Other backend files
└── README.md        # Project documentation

🌍 Deployment

Frontend

Deployed on Vercel:

  • Push to the main branch to trigger auto-deployment.

Backend

Hosted on Render:

  • Configure the backend service and deploy the repository.

Database

Hosted on Neon:

  • Ensure your database is connected and running.

🌐 Live Demo

Check out the live demo of the ecommerce App here.

🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. Fork the repository.
  2. Create a feature branch: git checkout -b feature-name.
  3. Commit changes: git commit -m "Add feature description".
  4. Push to the branch: git push origin feature-name.
  5. Open a pull request.

📧 Contact

If you have any questions, feel free to reach out:

Made with ❤️ using modern web technologies.