Skip to content

Welcome to SwapGardens, a web application that allows plant enthusiasts to connect and swap their beloved greenery with other like-minded individuals. Whether you're looking to share your plant collection or find new additions for your garden, SwapGardens has you covered.

Notifications You must be signed in to change notification settings

mdsejan/swap-gardens-client

Repository files navigation

SwapGardens - Plant Swap Web Application

Welcome to SwapGardens, a web application that allows plant enthusiasts to connect and swap their beloved greenery with other like-minded individuals. Whether you're looking to share your plant collection or find new additions for your garden, SwapGardens has you covered. This readme provides an overview of the client-side of our project.

Table of Contents

  1. Introduction
  2. Features
  3. Technologies Used
  4. Usage
  5. Live Site
  6. Server-side Repository

Introduction

SwapGardens is a plant swapping platform designed to facilitate the exchange of plants among users. It simplifies the process of discovering available swaps, booking them, managing your own swaps, and keeping track of your schedule. The project is built using modern technologies like React, Tailwind CSS, Axios, Lottie-react, Firebase, Express, JSON Web Tokens (JWT), and MongoDB to provide a seamless and user-friendly experience.

Features

SwapGardens offers a range of features to enhance your plant swapping experience:

  1. Home Page: View available plant swaps and the information of the swap providers right from the home page.

  2. All Swaps Page: Explore all plant swaps on a dedicated page, allowing you to browse and discover potential swaps easily.

  3. Swap Detail Page: Access detailed information about a specific swap, including descriptions, photos, and the provider's details, making an informed decision before booking.

  4. My Schedule Page: Keep track of your booked swaps in one place, ensuring you never miss an appointment.

  5. Add a Swap: Contribute to the community by adding your own swaps, complete with descriptions and images.

  6. Booked Swap Updates: If someone books your swaps, their booking details will be visible on your schedule page.

  7. Swap Management: Users can easily delete or update their swaps to keep their offerings up to date.

  8. Service Status Updates: Swap providers can update the status of their service, indicating availability, with a convenient dropdown menu.

Technologies Used

SwapGardens leverages a variety of technologies to create a responsive and feature-rich experience, including:

  • React: The front-end of SwapGardens is developed using the React library, ensuring a dynamic and interactive user interface.

  • Tailwind CSS: Tailwind CSS is used for styling, making the application visually appealing and responsive.

  • Axios: Axios is employed to make HTTP requests to the server, facilitating data exchange.

  • Firebase: Firebase is used for authentication and real-time data synchronization.

  • Express: Express.js is utilized on the server-side to handle API requests.

  • JSON Web Tokens (JWT): JWT is used for secure authentication and authorization.

  • MongoDB: MongoDB is used to store and manage data on the server.

Usage

SwapGardens is designed to be user-friendly, with a simple and intuitive interface. Users can easily navigate between pages, view available swaps, book swaps, manage their own swaps, and keep track of their schedules.

Live Site

You can access the live SwapGardens site here.

Server-side Repository

The server-side repository for SwapGardens can be found here.

Happy plant swapping with SwapGardens!

About

Welcome to SwapGardens, a web application that allows plant enthusiasts to connect and swap their beloved greenery with other like-minded individuals. Whether you're looking to share your plant collection or find new additions for your garden, SwapGardens has you covered.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages