Real-Time Transaction Web Application

This repository contains the source code for a full-stack Real-Time Transaction Web Application. The application allows users to create accounts, sign in, transfer money to other users, and view their transaction history. It features a robust backend built with Node.js, Express, MongoDB, and JWT for authentication, and a modern frontend developed using React, Recoil for state management, and Tailwind CSS for styling.

Project Link

• Real-Time Transaction Web Application

Screenshots

Table of Contents

• Project Description
• Prerequisites
• Setup Instructions
• Running the Application
• Backend API Endpoints
• Folder Structure
• Frontend Components

Project Description

The Real-Time Transaction Web Application is designed to provide users with a seamless experience for managing their finances online. Key features include:

• User Account Management: Users can create an account, sign in, update their credentials, and view their profiles.
• Real-Time Transactions: Users can transfer money to other users and view their balance in real-time.
• Search Functionality: Users can search for other users by name and initiate transactions with them.
• Responsive Design: The frontend is built with Tailwind CSS, ensuring a responsive and modern user interface.

Prerequisites

• Node.js
• MongoDB
• npm or yarn

Setup Instructions

1. Clone the Repository:

   git clone git@github.com:yourusername/transact-ease-payment-app.git
   cd transact-ease-payment-app

2. Install Dependencies:

   cd backend
   npm install
   cd ../frontend
   npm install

3. Environment Variables:

   • Create a .env file in the root of the backend folder with the following content:

     Port=3000
     JWT_secret=your_jwt_secret
     

   • Configure MongoDB connection string in backend/db.js.

Running the Application

To run the backend server:

cd backend
node index.js

The backend server should be accessible at http://localhost:3000.

To run the frontend application:

cd frontend
npm run dev

The frontend application should be accessible at http://localhost:3000.

Backend API Endpoints

User Routes

• POST /api/v1/user/signup

  • Creates a new user account.
  • Request body should contain username, firstname, lastname, and password.

• POST /api/v1/user/signin

  • Signs in an existing user.
  • Request body should contain username and password.

• PUT /api/v1/user

  • Updates user credentials.
  • Request body can contain firstname, lastname, and password.

• GET /api/v1/user/userprofile

  • Gets the profile of the logged-in user.

• GET /api/v1/user/bulk

  • Searches for users by first name or last name.
  • Query parameter name can be used to search.

Account Routes

• GET /api/v1/account/balance

  • Gets the balance of the logged-in user.

• POST /api/v1/account/transfer

  • Transfers money to another user.
  • Request body should contain to (recipient user ID) and amount.

Folder Structure

transact-ease-payment-app/
├── backend/
│   ├── routes/
│   │   ├── account.js
│   │   ├── user.js
│   │   └── index.js
│   ├── .env
│   ├── .gitignore
│   ├── config.js
│   ├── db.js
│   ├── index.js
│   ├── middleware.js
│   ├── package.json
│   ├── package-lock.json
│   └── zod.js
├── frontend/
│   ├── atoms/
│   │   ├── atoms.Signin.js
│   │   ├── atomsDashboard.js
│   │   ├── atomsSend.js
│   │   └── atomsSignup.js
│   ├── public/
│   │   ├── image1.png
│   │   ├── image2.png
│   │   ├── image3.png
│   ├── src/
│   │   ├── assets/
│   │   │   └── react.svg
│   │   ├── components/
│   │   │   ├── AnimationUser.jsx
│   │   │   ├── Dashboard.jsx
│   │   │   ├── InputBox.jsx
│   │   │   ├── Logout.jsx
│   │   │   ├── Me.jsx
│   │   │   ├── Send.jsx
│   │   │   ├── Signin.jsx
│   │   │   ├── Signup.jsx
│   │   │   ├── SpinAnimation.jsx
│   │   │   ├── TransactionDone.jsx
│   │   │   └── UserColumn.jsx
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   ├── .eslintrc.cjs
│   ├── .gitignore
│   ├── index.html
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── tailwind.config.js
│   ├── vercel.json
│   ├── vite.config.js

Frontend Components

AnimationUser.jsx

This component renders a loading animation for user data.

Dashboard.jsx

This component renders the dashboard where users can see their balance, search for other users, and initiate transactions.

InputBox.jsx

This component renders a reusable input box for forms.

Logout.jsx

This component handles the logout functionality.

Me.jsx

This component checks if the user is logged in and redirects accordingly.

Send.jsx

This component handles the money transfer functionality.

Signin.jsx

This component handles the sign-in functionality.

Signup.jsx

This component handles the sign-up functionality.

SpinAnimation.jsx

This component renders a loading spinner animation.

TransactionDone.jsx

This component displays a success message after a transaction is completed.

UserColumn.jsx

This component renders a user item in the user list.

License

This project is licensed under the MIT License. See the LICENSE file for details.