ZippyX

Your Payments Made Lightning Fast

       

 See it in Action  »

🗂️  Frontend   |   Backend  📂

Introduction · Features · Tech Stack · Quick Start · Manual Setup

❄️  Introduction

Experience seamless transactions and effortless money transfers with ZippyX. Delve into the codebase to explore more.

🔋  Features

• Organized File and Folder Structure

• Fully Responsive Design

• Well-organized & intuitive UI

• Server Side State Management & Caching using React Query.

• Client Side States Management with Recoil

• Custom Hooks

• Schema Validation using zod.

• Robus Authentication

• Google SSO (Single Sign-On)

• Security Measures like rate limiting and referesh tokens.

• Documentation with local development setup guide.

• Dark and Light Mode

⚙️  Tech Stack

• MongoDB – database

• Express – framework

• React – frontend

• Node.js – JavaScript runtime

• Tailwind CSS – CSS

• Recoil – state management

• Tanstack Query – asynchronous state management

• Mongoose – ODM

• Git – versioning

• Docker – containerziation

• Vite – building

• Vercel – deployments

🐳   Quick Start with Docker

0. Prerequisites

   Make sure you have the Docker installed on your machine.

1. Clone the repository:

   git clone https://github.com/yntpdotme/zippy-x.git

2. Navigate to the project directory:

   cd zippy-x

3. Add Environment Variables:

   Create .env files in the server and client folder and copy paste the content of .env.sample

   # server side
   cd server
   cp .env.sample .env # then update `.env` with your creadentials.
   cd ..
   
   # client side
   cd client
   cp .env.smaple .env # then update `.env` if required.
   cd ..

4. Start all services using Docker Compose:

   docker-compose up --watch
   
   # --watch to Enable Watch (For Live Update aka Hot Reloading)

🖥️   Manual Setup

0. Prerequisites
   Make sure you have the following installed on your machine:

   • Git
   • Node.js
   • npm (Node Package Manager)

1. Clone the repository:

   git clone https://github.com/yntpdotme/zippy-x.git

2. Navigate to the project directory:

   cd zippy-x

3. Setup Backend:

   • Navigate to the Backend Codebase:

     cd server/

   • Install dependencies:

     npm install

   • Add Environment Variables:

     Create .env file in the root folder and copy paste the content of .env.sample

     cp .env.sample .env

     Update credentials in .env with your creadentials.

   • Start the Server:

     npm start

   • Explore the API:

     Access the project APIs at the specified endpoints using API Docs.

4. Setup Frontend:

   • Navigate to the Frontent Codebase:

     cd client/

   • Install dependencies:

     npm install

   • Add Environment Variables:

     Create .env file in the root folder and copy paste the content of .env.sample

     cp .env.sample .env

     If required, update necessary credentials.

   • Start the frontend app:

     npm run dev

   • Start the backend server:

     cd ../server
     npm start

   • Open app in browser:

     Visit https://localhost:5173 to access frontent.

🤝  Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

🪪   License

ZippyX is open-source under the MIT License. Feel free to learn, add upon, and share!