Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ajao-victor/codealpha_folcommerce

Hey there! Folcommerce is my passion project—a sleek e-commerce app built for smooth shopping. Browse products, check out detailed item pages, add stuff to your cart, and checkout with ease. It’s got a clean, mobile-friendly design and a solid backend. Made with HTML, CSS, JS, Node.js, Express, and PostgreSQL, plus JWT for secure logins.
https://github.com/ajao-victor/codealpha_folcommerce

api-client axios bcrypt cors css3 expressjs html5 javascript jwt-authentication nodejs postgresql-database

Last synced: about 2 months ago
JSON representation

Hey there! Folcommerce is my passion project—a sleek e-commerce app built for smooth shopping. Browse products, check out detailed item pages, add stuff to your cart, and checkout with ease. It’s got a clean, mobile-friendly design and a solid backend. Made with HTML, CSS, JS, Node.js, Express, and PostgreSQL, plus JWT for secure logins.

Awesome Lists containing this project

README 

          
    Folcommerce

Hey there! Welcome to Folcommerce, my passion project—an e-commerce platform crafted to make online shopping in Nigeria super smooth and fun. Whether you're browsing cool products, checking out detailed item pages, managing your cart, or checking out, Folcommerce has you covered with a sleek, mobile-friendly interface and a rock-solid backend. Built with love using HTML, CSS, JavaScript for the front end and Node.js/Express for the backend, it’s ready to deliver a top-notch shopping experience. Wanna give it a spin or help make it even better? Let’s dive in! 😊

Features



Product Browsing: Explore a catalog of products with a handy search bar to find what you love.

Product Details: Click any product to see its full info—images, descriptions, and price—pulled straight from a PostgreSQL database.

Cart Management: Add items, tweak quantities, or clear your cart, with real-time updates for a seamless flow.

Checkout: Wrap up your purchase with a clean, secure checkout process.

Secure Authentication: JWT-based login keeps your account safe and sound.

Responsive Design: Looks great on any device, from phones to desktops, with a modern vibe thanks to Animate.css and Font Awesome.

API-Driven: Backend powered by Node.js/Express, with sample data seeded from the Fake Store API.



    Tech Stack



    Frontend: HTML5, CSS3, JavaScript, Animate.css, Font Awesome

Backend: Node.js, Express.js

Database: PostgreSQL

Authentication: JSON Web Tokens

Tools: npm, http-server` for local development

Deployment: Ready for Netlify (frontend) and Render (backend) (optional)



    Getting Started

Ready to try Folcommerce out locally? Here’s how to set it up:

Prerequisites



Node.js (v16 or higher)

PostgreSQL (set up locally or via a cloud provider like RenderDB or Heroku)

Git

A browser (Chrome, Firefox, etc.)



    Installation



Clone the Repo:

git clone https://github.com/Ajao-Victor/folcommerce.git

cd folcommerce



    Set Up the Backend:



Navigate to the backend folder (if separate, e.g., backend/):cd backend

npm install



Create a .env file in the backend folder with:DATABASE_URL=your_postgres_connection_string

JWT_SECRET=your_jwt_secret_key



Start the backend:npm start



Note: Ensure PostgreSQL is running and has products and cart_items tables (see schema below).



Set Up the Frontend:



Navigate to the frontend folder (e.g., root or frontend/):cd ../frontend



Install http-server globally (if not already installed):npm install -g http-server



Serve the frontend:http-server



Open http://localhost:8080/index.html in your browser.



Database Schema:Create the required tables in PostgreSQL:

CREATE TABLE products (

    id INTEGER PRIMARY KEY,

    title TEXT NOT NULL,

    price DECIMAL NOT NULL,

    description TEXT,

    image_url TEXT

);



CREATE TABLE cart_items (

    id SERIAL PRIMARY KEY,

    user_id INTEGER NOT NULL,

    product_id INTEGER REFERENCES products(id),

    quantity INTEGER DEFAULT 1

);



    Test It Out:



Register/login to get a JWT token (stored in localStorage).

Browse products, add to cart, view cart, and checkout.

Use the search bar to filter products.



Project Structure

folcommerce/

├── server/                 # Node.js/Express backend

│   ├── server.js            # Main server file

│   ├── .env                 # Environment variables

│   └── node_modules/

|-Client/

|    ├── cssFiles/                # CSS styles

│       ├── cart.css

│       ├── checkout.css

│       ├── index.css

│       ├── product-detail.css

│       └── products.css

├── logo.png                 # App logo

|    |-shop/

|        ├── about.html

|        ├── cart.html

|        ├── checkout.html

|        ├── contact.html

|        ├── index.html               # Home page

|        ├── product-detail.html

|        ├── products.html            # Product listing

|        ├── registration.html        # Login/registration

|        └── services.html



    Contributing

Love the project and wanna help? Awesome! Here’s how:



Fork the repo.

Create a branch: git checkout -b feature/your-feature.

Commit changes: git commit -m "Add your feature".

Push to your fork: git push origin feature/your-feature.

Open a pull request with a clear description.



Please open an issue first for major changes or bugs to discuss ideas!

Known Issues



Checkout is minimal (no payment gateway yet—Paystack integration planned).

Product data uses Fake Store API; custom products to be added.

Add error handling for edge cases (e.g., invalid tokens).



    Future Plans



Integrate Paystack for payments.

Add user profiles and order history.

Implement product categories and filters.

Optimize performance with lazy-loaded images.



    Contact Me

Got questions or ideas? Reach out!



Email: svictoroluwatimileyin3@gmail.com

Phone: +234 913 110 9245

GitHub: Ajao-Victor

LinkedIn: Victor Ajao or www.linkedin.com/in/victor-ajao-970771253

Location: Osun State, Nigeria



Thanks for checking out Folcommerce! Let’s build something amazing together. 🚀