Learning Remix with React 📚

This project was created as a hands-on learning exercise to explore Remix with React. The goal is to understand the core concepts of Remix and apply them to build a functional web application.

Tech Stack 💻

Core

• Remix – Full-stack React framework
• React – Frontend library
• TypeScript – Typed JavaScript
• MongoDB – NoSQL database
• Docker – Containerized environment
• Tailwind CSS – Utility-first CSS framework
• Swagger – API documentation
• GraphQL – Query language for APIs
• Prisma – A modern ORM providing type-safe database access and streamlined migrations

Additional Libraries

• Zustand – State management
• DataLoader – Batch and cache DB requests
• react-feather – Icon set
• react-responsive-modal – Modal component

Development 🛠

To start the app in development mode (outside of Docker), run:

npm run dev

This command launches the application and automatically rebuilds assets when files change.

Docker Deployment 🚀

Follow these steps to set up and run the application using Docker Compose:

1. Clone the Repository:

   git clone [email protected]:jhonatanAlanFerreira/financial_manager_remix.git
   cd financial_manager_remix

2. Set Up Environment Variables:

   Copy the example environment file and modify it as needed (for example, to change port settings):

   cp .env.example .env

3. Start the Containers:

   Run the following command to start all containers in detached mode:

   docker-compose up -d

4. Check the Front-End Build Logs:

   To confirm that the front-end has built successfully, check the logs for the financial_manager_app container:

   docker-compose logs financial_manager_app

   You should see log messages similar to:

   [info] building...
   [info] built (34.1s)
   [remix-serve] http://localhost:3000
   

   Wait until you see the “built” message along with the URL before accessing the app in your browser.

Note: If you're new to Docker or Docker Compose, please refer to the Docker Documentation for more details on how Docker works and how to troubleshoot common issues.

Additional Endpoints

Once the Docker containers are running (assuming default port 3000):

• Swagger UI: Visit http://localhost:3000/docs for API documentation.
• GraphQL Playground: Access http://localhost:3000/graphql-playground to explore and test your GraphQL queries.

Prisma Commands 🗄

Since the application is running inside Docker containers, run these commands within the financial_manager_app container:

• Seed Database:

  docker-compose exec financial_manager_app npx prisma db seed

• Sync Database Schema:

  docker-compose exec financial_manager_app npx prisma db push

• Generate Prisma Client:

  docker-compose exec financial_manager_app npx prisma generate

Testing 🧪

To run tests or type checking within the Docker container:

• Type Checking:

  docker-compose exec financial_manager_app npm run typecheck

• Unit and Feature Testing:

  docker-compose exec financial_manager_app npm run test

---

For more in-depth notes on architecture decisions, state management, and other considerations, see our Learnings.