React Apollo

A boilerplate for fullstack projects using TypeScript, React, GraphQL and Apollo server

Install project

Rename the file template.env to .env, and replace the values with your email, password, etc. Do the same thing in the client folder.

Then run npm install at the root of the project. Since we're using Concurrently this will install packages for backend and frontend.

Run project

Run npm run dev at the root of the project. Once again, thanks to Concurrently, backend and frontend will run at the same time.

Packages

Backend

• @apollo/server
• GraphQL
• JSON web token
• Bcrypt js
• Mongoose
• Nodemailer
• TS Node dev
• TS utils: own package, with basic functions written in JavaScript

Frontend

• React
• React router dom
• @apollo/client
• GraphQL
• Styled components
• TSX library: own package, with basic React UI components

Backend

API

All the functions can be found in the server folder.

Models

All the models can be found in server/models folder.

Create data

Find an example for adding bulk data inside a database in server/db/seed.js.

Frontend

GraphQL

All GraphQL functions for the client can be found at client/src/graphql.

Add pages

Create your pages in client/src/pages. Then, go to client/src/routes/routes.ts and add them in the array const routes.

Styling

Most of components come from TSX library package. If you need new components, you can add them in client/src/components.