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.
![Screenshot 2024-04-12 at 3 28 11 PM](https://private-user-images.githubusercontent.com/63283989/321944211-6781fb97-939c-4229-b76c-be40f90b5877.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MDQ5MTcsIm5iZiI6MTcyNDcwNDYxNywicGF0aCI6Ii82MzI4Mzk4OS8zMjE5NDQyMTEtNjc4MWZiOTctOTM5Yy00MjI5LWI3NmMtYmU0MGY5MGI1ODc3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDIwMzY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWVmMTdlYmMwNjI5MWM5OTY4YjRmNjA0NDc0MzZiOTllMTk4NGIzM2Q2ZmY0ZWU2YTBkODU1NmQyZDVkYWYyZDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QOR9kpyn019_WFtKjroU233oND91_cLBGzuxw6wQUl0)
![Screenshot 2024-04-12 at 3 27 14 PM](https://private-user-images.githubusercontent.com/63283989/321944192-9768ac6d-5efc-43c9-9eb0-7acf787d013b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MDQ5MTcsIm5iZiI6MTcyNDcwNDYxNywicGF0aCI6Ii82MzI4Mzk4OS8zMjE5NDQxOTItOTc2OGFjNmQtNWVmYy00M2M5LTllYjAtN2FjZjc4N2QwMTNiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDIwMzY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTkzMmQzNWRkNjhhYzMxYWZmOTg2OThiYTZkMDIyNzFlMGJlMGNhMThhNzAxNGM4MDVmNGI2YjRkNzlhZjY4MjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QHvTUHvo-XaLyYJwyBL6WYO3F0s0puprZKf9Trh7XZc)
![Screenshot 2024-04-12 at 3 30 38 PM](https://private-user-images.githubusercontent.com/63283989/321945131-4d9358d5-4145-4307-9387-f829690a1ea7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MDQ5MTcsIm5iZiI6MTcyNDcwNDYxNywicGF0aCI6Ii82MzI4Mzk4OS8zMjE5NDUxMzEtNGQ5MzU4ZDUtNDE0NS00MzA3LTkzODctZjgyOTY5MGExZWE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDIwMzY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0YWM2YzcyMmU1YzA4N2Y1MTIyMjZjYjNkNTdlYjhmNTBlZDc5MWY1OWQ2YjIxODUzMjJjODI2NjU5Yzg3NGYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.CDIUuY--PS8JNFXP-U_v9R8rOs21qHv4g8s1CGngHGM)
![Screenshot 2024-04-12 at 3 30 30 PM](https://private-user-images.githubusercontent.com/63283989/321945122-b8b593e6-7602-4b6b-87f2-526d13750a0d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3MDQ5MTcsIm5iZiI6MTcyNDcwNDYxNywicGF0aCI6Ii82MzI4Mzk4OS8zMjE5NDUxMjItYjhiNTkzZTYtNzYwMi00YjZiLTg3ZjItNTI2ZDEzNzUwYTBkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI2VDIwMzY1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTA5ZGVhZGMyZDI5ZjIxMmRlYjMzZDUyYTAxOGEwNzNiNjJhMjEwMTQxMzIxZWE3OGNkNmY1YTA4YjBlZTAxNmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QQ5PTof5GNtjsGQTHB3GLXaEd57rAkkIt8mFH2cIFSI)
- Project Description
- Prerequisites
- Setup Instructions
- Running the Application
- Backend API Endpoints
- Folder Structure
- Frontend Components
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.
- Node.js
- MongoDB
- npm or yarn
-
Clone the Repository:
git clone git@github.com:yourusername/transact-ease-payment-app.git cd transact-ease-payment-app
-
Install Dependencies:
cd backend npm install cd ../frontend npm install
-
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
.
- Create a
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
.
-
POST /api/v1/user/signup
- Creates a new user account.
- Request body should contain
username
,firstname
,lastname
, andpassword
.
-
POST /api/v1/user/signin
- Signs in an existing user.
- Request body should contain
username
andpassword
.
-
PUT /api/v1/user
- Updates user credentials.
- Request body can contain
firstname
,lastname
, andpassword
.
-
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.
-
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) andamount
.
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
This component renders a loading animation for user data.
This component renders the dashboard where users can see their balance, search for other users, and initiate transactions.
This component renders a reusable input box for forms.
This component handles the logout functionality.
This component checks if the user is logged in and redirects accordingly.
This component handles the money transfer functionality.
This component handles the sign-in functionality.
This component handles the sign-up functionality.
This component renders a loading spinner animation.
This component displays a success message after a transaction is completed.
This component renders a user item in the user list.
This project is licensed under the MIT License. See the LICENSE file for details.