I use reddit pretty often, and I was looking for a project to work on during winter break. I decided to go through Ben Awad's full stack tutorial. I made changes to the UI so that it would reflect the actual reddit website. Overall, this project really helped me understand how to frontend and backend components work together. Below are some notes I took, feel free to read my thoughts or comment if I'm wrong about anything!
According to the Apollo docs a schema defines a hierarchy of types with fields that are populated from your back-end data stores. I use GraphQL in order to run CRUD operations on my database. I use Code-first development - defining the resolver first then defining the Schema because it works well with typescript. I used the Type-GraphQL library for Code-first development.
Using TypeORM with TypeGraphQL is very helpful for keeping everything in sync. By definition, I must define a schema for 1. GraphQL and 2. my database. Having an ORM (Object-relational Mapper) allows me to map objects into my postgresQL database.
Redis uses key value pairings similar to a hashmap.
req.session.userId: I use Reddis to store user sessions The keys refer to sess:[x] and the value sent back is {userId: x}. When used in combination with Express, express-session sets an encrypted cookie on my browser that represent the key we send to Redis. When a user makes a requet, the cookie is decrypted back into the Redis sess form which will be used in the Redis hashmap.
Express is a middleware technology. I use it in conjunction with Apollo-Server. I can use req.session to store any values I want. For Example, I use req.session to store userId's when a user logins or registers. I could store the whole User object in req.session, however, I changed the User object several times during this project.
NextJS is really fun to use. They make routing really simple.
Chakra helps build faster React Components :)
Urql helps me makes GraphQL requests from the frontend. I can also toggle on Server-side rendering or Client-side rendering. I use GraphCache in order to update cache. I use cache in order to update the query on the frontend whenever I make a Mutation (login, register, posts).
GraphQL Code Generator integrates React and GraphQL seamlessly. I am able to create React Hooks and allow me to access GraphQL resolvers.