remix-demo

react router (remix) demo

git clone https://9o.is/git/remix-demo.git

README.md

(2255B)

      1 # React Router (Remix) Demo
      2 
      3 ## What's in the stack
      4 
      5 - React for frontend
      6 - Node.js/Express for backend.
      7 - SSR, Routing, etc with [Remix](https://remix.run/docs).
      8 - Email/Password Authentication with [cookie-based sessions](https://remix.run/docs/en/v1/api/remix#createcookiesessionstorage)
      9 - Database ORM with [Prisma](https://prisma.io)
     10 - Styling with [Tailwind](https://tailwindcss.com/)
     11 - End-to-end testing with [Cypress](https://cypress.io)
     12 - Local third party request mocking with [MSW](https://mswjs.io)
     13 - Unit testing with [Vitest](https://vitest.dev) and [Testing Library](https://testing-library.com)
     14 - Code formatting with [Prettier](https://prettier.io)
     15 - Linting with [ESLint](https://eslint.org)
     16 - Static Types with [TypeScript](https://typescriptlang.org)
     17 
     18 ## Development
     19 
     20 - Install dependencies.
     21 
     22   ```sh
     23   npm install
     24   ```
     25 
     26 - Start the Postgres Database in Docker:
     27 
     28   ```sh
     29   npm run docker
     30   ```
     31 
     32   > **Note:** The npm script will complete while Docker sets up the container in the background. Ensure that Docker has finished and your container is running before proceeding.
     33 
     34 - Initial setup:
     35 
     36   ```sh
     37   npm run setup
     38   ```
     39 
     40 - Run the first build:
     41 
     42   ```sh
     43   npm run build
     44   ```
     45 
     46 - Start dev server:
     47 
     48   ```sh
     49   npm run dev
     50   ```
     51 
     52 This starts your app in development mode, rebuilding assets on file changes.
     53 
     54 The database seed script creates new users and food entries. Log in as admin with `julio@example.com` or check out the seed file for other users. You can also run `npx prisma studio` to inspect the data in PostgreSQL.
     55 
     56 ## Testing
     57 
     58 ### Cypress
     59 
     60 We use Cypress for our End-to-End tests in this project. You'll find those in the `cypress` directory.
     61 
     62 To run these tests in development, run `npm run test:e2e:dev` which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.
     63 
     64 ### Vitest
     65 
     66 We use Vitest for running unit tests. Run `npm run test`.
     67 
     68 ### Type Checking
     69 
     70 To run type checking across the whole project, run `npm run typecheck`.
     71 
     72 ### Linting
     73 
     74 This project uses ESLint for linting. That is configured in `.eslintrc.js`. Run `npm run lint`.
     75 
     76 ### Formatting
     77 
     78 We use Prettier for auto-formatting. To format the whole project, run `npm run format`.