If you’re looking to explore a modern banking application built with TypeScript, React, Redux, and Node, you’ve come to the right place! This guide will take you step-by-step through the setup process, allowing you to dive right into this beautiful blend of technologies.

What’s Inside?

• Login/Register
• Accounts
• Transactions + Create New Transaction
• Credit/Debit Cards + Change PIN and Limits
• Internal Messaging
• User Profile including Data Change
• Help Form
• Income Change Chart
• Currency Stats
• Form Validation, Async Routing
• Dummy Data Generator

Installation and Running (Old API, Node/Express)

1. Install Node.js and MongoDB. Consider using MongoDB Compass for easier database handling.
2. Create a database named react-bank-api or any name of your choice. If using a different name, update it in the old-api.env config file.
3. Install the required dependencies in both the web and old-api folders by running npm install within each of them.
4. To run the API, navigate to the old-api folder and type npm run start-dev.
5. To run the web application, type npm start within the web folder.

Installation and Running (New API, Node/Strapi)

1. Install Node.js and MariaDB.
2. Create a database named react-bank-api or use a custom name, remembering to update it in the .env config file.
3. Install all dependencies for both web and root folders with npm install.
4. To run the API, navigate to the root folder and type npm run develop. Alternatively, use Visual Studio Code debugger for execution.
5. Run the web application using npm start in the web folder.
6. Adjust the frontend to utilize the new Strapi endpoints.

First Steps with Strapi

1. Upon starting the app, create an example user with login credentials: email@example.com and admin123. You can also utilize the dummy data generator by sending a POST request to http://localhost:1337/app/generate-dummy-data. This action creates a few users along with their respective accounts, cards, transactions, and stats.
2. Access the Strapi admin panel at http://localhost:1337 and set the correct roles and permissions for the endpoints your app will be using, such as enabling dummy data generation for the Public role.

Troubleshooting Tips

If you encounter any issues during the setup process, here are a few tips you can try:

• Ensure all dependencies are correctly installed in both the web and API folders.
• Double-check your database name and credentials in your configuration files.
• Make sure your Node.js and MongoDB (or MariaDB) services are running properly.
• If you receive a “forbidden” error, revisit your API permissions in the Strapi admin panel.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Running Strapi API on VPS Using PM2

If you wish to run the Strapi API on a VPS, particularly with Ubuntu 20.04 LTS, follow these steps:

1. Install Node and NPM: sudo apt install nodejs and sudo apt install npm
2. Install PM2 globally: npm i -g pm2
3. Move all Strapi files to /var/www/react-bank-api.
4. Execute the command NODE_ENV=production npm run build && pm2 start ecosystem.config.js --env production. This will build the Strapi admin panel in production mode and start your application using PM2.
5. Your production Strapi should now be ready to serve requests!

Final Thoughts

Remember to set up the route permissions on your server, otherwise, most of the endpoints might return forbidden errors.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Code Explanation Analogy

Setting up this application is like constructing a modern house. The front end (React) is the stunning façade that welcomes you, while the backend (Node and Strapi) is the solid foundation and infrastructure hidden beneath. TypeScript acts as your blueprints, ensuring every part is built with precision and clarity. Just like installing plumbing and electrical systems (MongoDB, MariaDB), you need to ensure everything connects correctly for a seamless living experience. Each section, whether it’s user authentication, transactions, or managing accounts, must be integrated smoothly to create a fully functional space for your digital banking needs.