A demo Payment application made in MERN.
This is a full-stack payment application designed to streamline financial transactions between users. Built using the MERN stack, the application provides a secure and efficient platform for users to sign up, sign in, explore their dashboard, and seamlessly send money to other users.
- User Authentication: Easily create an account and securely log in.
- Dashboard: Access a personalized dashboard displaying user information and other users.
- Send Page: Initiate secure dummy money transfers to other users effortlessly.
- Animation: Enjoy a visually appealing experience with animated elements powered by Lottie.
- State Management: Efficiently manage application state using Recoil.
-
Frontend:
- React
- React DOM
- Lottie
- Recoil
- Tailwind CSS
-
Backend:
- Node.js
- Express.js
- MongoDB (with Mongoose)
- Zod for validation
- Axios for HTTP requests
- Node.js and npm installed
- MongoDB installed and running
-
Clone the repository.
git clone https://github.com/your-username/your-repo.git
-
Install dependencies.
cd payment-app
npm install
- Start the server.
cd backend
node "index.js"
- Start the client.
cd frontend
npm install
npm run dev
This is a student project developed to gain hands-on experience with full-stack development. As you explore the application, keep in mind that its primary purpose is to showcase various skills and technologies learned during the development process.
-
Signup and Login:
- Start by creating an account using the signup page. This process simulates user registration and authentication steps to demonstrate backend and frontend integration.
-
Dashboard:
- Upon successful login, you'll be directed to the dashboard, where you can observe how user-specific data is displayed. Take a closer look at how state management (Recoil) is utilized for a smooth user experience.
-
Send Money:
- Navigate to the send page to simulate money transfers between users. This feature highlights backend interactions, including data validation using Zod and HTTP requests with Axios.
-
Animations:
- Enjoy the animated elements powered by Lottie, showcasing how frontend libraries can enhance the overall look and feel of the application.
-
State Management:
- The project utilizes Recoil for state management. Experiment with different scenarios to see how the application maintains a consistent state across various components.
-
Explore and Test:
- Feel free to explore other features and functionalities. While the project may not be a market-ready product, it serves as a valuable learning tool. Consider examining the source code to understand how different technologies are implemented.
Remember, this project is a reflection of the learning journey, and your engagement with it contributes to a deeper understanding of full-stack development concepts.
.
├── frontend/ # Vite Frontend App
│ ├── public/
│ ├── node_modules/
│ ├── src/
│ │ ├── assets/ # Images, fonts, etc.
│ │ ├── components/ # React components
│ │ ├── pages/ # React pages/screens
│ │ ├── main.js # Main entry file for the Vite app
│ │ ├── App.jsx # Main React file
│ │ ├── index.css
│ │ └── App.css
│ ├── store # All the Recoil atoms are stored here
│ ├── package.json # Frontend dependencies and scripts
│ ├── index.html
│ ├── tailwind.config
│ ├── vite.config
│ └── ...
├── backend/ # Backend Node.js App
│ ├── config.js # Configuration files
│ ├── routes/ # Express routes
│ │ ├── account/ # Account route
│ │ ├── index/ # Main express app for all /api/v1 requests
│ │ ├── middlewares/
│ │ ├── user/ # User route
│ ├── types.js # Zod Schema file
│ ├── index.js # Express application setup
│ ├── db.js # Database Schema file
│ └── ...
├── .gitignore # Git ignore file
├── README.md # Project README file
├── package.json # Backend dependencies and scripts
├── package-lock.json # Dependency lock file
├── .env # Environment variable file
└── ...
├── Dockerfile
├── README.md