This project is a simple Next.js application integrated with Docker for easy deployment and management. It includes features like a form for adding bank accounts with validation and a backend connection for fetching and displaying account data.
- 🏦 Add bank accounts with validation (e.g., IBAN format).
- 📋 Fetch and display a list of bank accounts.
- 🔒 Built with Next.js and React Hook Form for efficient form handling.
- 🐳 Dockerized for seamless deployment.
- ⚡ Fully customizable and easy to extend.
Ensure you have the following installed on your system:
-
Clone the repository:
git clone https://github.com/MooudMohammady/banking-system.git cd banking-system -
Install dependencies:
npm install --force- Set up environment variables: Create a
.envfile in the root directory and add the necessary environment variables:
DATABASE_URL=your-postgresql-database-url- Development server: Start the Next.js development server:
npm run dev- Access the application: Open your browser and visit: http://localhost:3000
- Build the Docker image:
docker build -t banking-system .- Run the Docker container:
docker run -p 3000:3000 banking-system- Access the application: Open your browser and visit: http://localhost:3000
If you want to run only the PostgreSQL database using Docker Compose, use the following command:
docker-compose up postgresThis will start only the postgres service defined in docker-compose.yml file. Ensure that your .env file contains the correct DATABASE_URL pointing to this database instance.
banking-system/
├── public # Public assets
├── src/
│ ├── actions/ # API actions for data fetching and mutations
│ ├── app/ # Next.js pages
│ ├── components/ # Shared UI components
│ │ ├── ui/ # Reusable UI elements (Button, Input, etc.)
│ ├── lib/ # additional features
├── docker-compose.yml # Docker configuration for postgres DB
├── dockerfile # Docker configuration
├── README.md # Project documentation
├── .env # Environment variables (not exist by default)
├── package.json # Project dependencies and scripts
└── tsconfig.json # TypeScript configuration
- If this is the first time you run the project, be sure to execute this command first:
npm run prisma:prepare- Enter this command if you need sample information:
npm run prisma:seed- Start development server:
npm run dev- Build the application:
npm run build- Run production server:
npm run startThe project uses zod and react-hook-form for validation. The bank account form includes:
- Bank Name: Minimum 3 characters.
- IBAN: Matches the standard IBAN format.
- Balance: Valid numeric value.
This project utilizes TailwindCSS and ShadCN to build a scalable and reusable design system.
- A utility-first CSS framework for rapid UI development.
- Provides a consistent and highly customizable styling system.
- Enables responsive design and theming with ease.
- A collection of accessible and customizable UI components built with Radix and TailwindCSS.
- Ensures consistent design language across the project.
- Simplifies the development of reusable and composable components.
This project is licensed under the MIT License.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a feature branch:
git checkout -b feature-name. - Commit your changes:
git commit -m "Add feature-name". - Push to the branch:
git push origin feature-name. - Open a pull request.
If you're looking for specific tasks to contribute, here are some areas where help is needed:
- Build the Deposit Page and Logic: Design and implement the user interface and backend logic for depositing funds.
- Build the Withdraw Page and Logic: Create the page and functionality for withdrawing funds from accounts.
- Write Automated Tests: Use tools like Cypress or Jest to write robust test cases for the application.
- Bug Fixes and Enhancements: Complete pending details, optimize existing features, and resolve reported bugs.
- Add Pagination and Filters: Implement pagination and filtering for the transaction history page to improve usability.
- Other Outstanding Tasks: Review the issue tracker for other tasks that need attention or discuss with the team for additional ideas.
Your contributions make a difference!
For any questions or issues, please feel free to reach out:
- Email: mooudmohammadi@gmail.com
- GitHub: https://github.com/MooudMohammady