image

MITMERN App

MITMERN App

Description

The MITMERN Bank app provides users with a seamless and secure platform to manage their finances. Users can create accounts, log in securely, and perform transactions such as deposits, withdrawals, and fund transfers. The app features real-time balance updates and transaction validation, ensuring accuracy and efficiency. With a sleek, intuitive interface crafted using React, CSS, and Bootstrap, users enjoy a user-friendly experience for all their banking needs.

Features

  • Account Management: Users can create accounts, log in securely, and manage their profiles.
  • Transactions: Perform deposits, withdrawals, and transfers with real-time balance updates.
  • Admin Dashboard: Admins can view all users, accounts, and transactions with scrolling enabled for easy management.
  • User Dashboard: Users can view their account details and recent transactions in a clear, organized layout.
  • Responsive Design: The app is fully responsive, offering an optimal experience across devices.
  • Security: JWT-based authentication ensures secure access to user accounts.

Improvements

Recent updates to enhance user experience and functionality include:

  • Navigation: Improved navbar with clear indicators and professional dropdowns.
  • Feedback: Success and error messages for user actions, improving clarity.
  • UI Consistency: Uniform Bootstrap card styles across all pages, with added splashes of color for visual appeal.
  • Transfer Funds: A dedicated section for transferring funds between accounts.
  • Admin Dashboard: Scrollable interface for easier management of data.

How to Run

To run the MITMERN Bank App on your machine, follow these steps:

  • Clone the repository:
    git clone https://github.com/marialee222/mitmern.git
  • Navigate to the directory:
    cd bank
  • Install the necessary dependencies for both the front-end and back-end:
    cd frontend

    npm install
  • Then, do the same for the backend:
    cd ./backend

    npm install
  • Set up environment variables:
  • Ensure that you have all the necessary environment variables set up for both the front-end and back-end.
  • For the backend, create a .env file in the backend directory and add the required environment variables:
    JWT_SECRET=your_jwt_secret

    MONGO_URI=your_mongo_connection_string
  • For the frontend, you might also need to configure environment variables if applicable.
  • Run the back-end server:
  • From the backend directory:
    npm run dev
  • The back-end server should now be running on http://localhost:5001.
  • Run the front-end server:
  • Open a new terminal, navigate to the frontend directory, and start the front-end server:
    npm start
  • The front-end server should now be running on http://localhost:3000.
  • Open your preferred browser and navigate to:
    http://localhost:3000
  • You should now see the MITMERN Bank App running locally.

Roadmap of Future Improvements

Future improvements for the MITMERN App include:

Two-Factor Authentication (2FA): Adding an extra layer of security.

Detailed User Dashboard: Providing more insights and features.

Transaction Categories & Budgeting Tools: Helping users manage their finances better.

Mobile App Development: Expanding accessibility to mobile users.

Personalization & Notifications: Enhancing user engagement with personalized features.

Tech Stack & Tools:

Results

Project background info goes here. Fusce laoreet ornare risus, et sollicitudin turpis viverra nec. Proin eu lacinia ipsum. Curabitur porta a mi sit amet iaculis.

30%

30% more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

2.5X

2.5X more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

60%

60% less lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

20K

20K lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

Client Testimonials

You can list client testimonials here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Highlighted text example etiam volutpat ornare quam at cursus mi tristique sit amet.
Emily Doe, Project Lead at Company Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas est at lorem lacinia malesuada vel at arcu.
John Doe, Manager at Company Lorem

Need Help With Your Project?

Your website is often the central hub for your online presence. It's the place where potential customers can learn more about your products or services. A well-developed website provides a positive user experience, which is crucial for retaining visitors and converting them into leads.
Color Switcher