Green Paradise

Table of Contents

1. Introduction
2. Deployed Link
3. Tech Stack
4. Tech Stack Detailed Explanation
5. Features
6. Screenshots
7. Contributors

Introduction

Welcome to our online e-commerce platform for plants, a project initiated by our educational institution, Masai School. This platform was developed as part of our construct week project and is designed to provide a seamless shopping experience for plant enthusiasts.

Our platform allows users to browse and purchase a wide variety of plants from the comfort of their homes. We’ve incorporated a user-friendly interface and secure payment methods to ensure a smooth and safe shopping experience.

The project utilizes a range of technologies including HTML, CSS, and JavaScript for front-end development. We’ve also implemented JSON Server for full fake REST API, Firebase for user authentication and real-time database functionality, and Razorpay for secure payment processing.

Deployed Link

https://enchanting-klepon-de18e6.netlify.app/

Tech Stack

• HTML
• CSS
• JavaScript
• JSON Server
• Firebase
• RazorPay

Tech Stack Detailed Explanation

• HTML: Used to structure the content on the web page, including the layout of the product listings, user login/signup forms, and navigation menus.

• CSS: Used to style the HTML elements on your webpage. This includes things like colors, fonts, and layouts for the product listings, forms, and other components of your site.

• JavaScript: Used to make the website interactive. This includes things like handling user input, updating the shopping cart, and communicating with Firebase and JSON Server.

• JSON Server: Used as a full fake REST API to fetch product data. When a user visits your site, JavaScript code makes requests to JSON Server to get information about the products.

• Firebase Authentication: Used for user login and signup. When a user enters their login credentials or signs up for a new account, Firebase Authentication is used to verify their identity and create their account.

• Firebase Realtime Database: Used to manage user data. This includes storing information about users like their name, email, phone number, cart products, wishlist products, and ordered items. It's also used to manage all users' orders combined.

• RazorPay: Used to handle payment processing. When a user decides to purchase their items, RazorPay is used to process the payment securely.

Features

• User Authentication: Users can sign up and log in using their credentials. There's also an option for users to log in using their Google account.

• Product Search: Users can search for products on the site.

• Product Catalogue: Users can add products to their cart or wishlist. They can sort and filter products by price, category, etc.

• Shopping Cart: Users can add products to their cart. In the cart, users can increase or decrease the quantity of items, apply coupons, or remove items. They also have the option to save items for later, which moves them to the wishlist.

• Wishlist: Users can add products to their wishlist. From the wishlist, users can remove items or move them to the cart.

• Payment: Users can make payments using debit cards, credit cards, net banking, and UPI.

Screenshots

Login Page

Sign Up Page

Cart Page

Checkout

Checkout Page User Details

Checkout Page Address

Checkout Payment gateway

Payment Success

ThankYou Page

![image](

Contributors

1. Anjali Sinha

   • GitHub: @Coders6754
   • LinkedIn: Anjali Sinha

2. Narayan Das

   • GitHub: @noobnarayan
   • LinkedIn: @noobnarayan

3. Rishita Mukherjee

   • GitHub: @RiiXXD

4. Suraj Kumar Yadav

   • GitHub: @SurajYadav007
   • LinkedIn: Suraj Yadav