React Practice With GraphQL

website

Hello, and Welcome to my blog!

Recently I have been working through some tutorials from Thinkster.io. In this blog post, I will be reviewing my experience going through the React and Redux tutorial.

I completed the tutorial using the GraphQL API I made. The tutorial uses a REST API, so I had to make lots of changes. The changes made completing the tutorial more challenging, but it also made it more interesting. I am glad I did it.

I used Apollo React Client as the GraphQL client to connect to my API. Overall, I liked Apollo, but since I was also using Redux, it made it a bit difficult at times. Apollo and Redux both due state management, I think for future GraphQL applications, I would probably not use them both at the same time. But for the practice, I am glad I used redux again.

It was fun using React again. My last React project ended in December. Completing this practice project was a great learning experience for me. I became more comfortable with making functional components. I now know when to use functional components over the traditional class component. In my last React project, I didn’t re-use components much. In this project, I got practice re-using a bunch of components.

I also changed up the router, the tutorial used react-router. I changed to Reach-router. The main reason for switching was due to some incompatibility with Apollo if I remember correctly. Overall, I found it works better than the traditional React router. I liked it a lot.

Another cool thing I learned well completing this tutorial was how to make custom Redux middleware. I created a custom middleware to handle setting and clearing the JWT from the browser. It worked amazingly, and it was easy to do. I will link the Git-Hub below if your interested; the code is in the file src/middleware.js.

To finish the project, I deployed the GraphQL server on Heroku and used an Amazon S3 bucket to host the web app. Here is the link to the site: http://react.practice.site.s3-website.ca-central-1.amazonaws.com/ 

To conclude, I had a great time doing this project, and I learned a lot. To run the project, I am using a MongoDB server hosted on MongoDB Atlas, GraphQL server hosted on Heroku, and React application hosted on Amazon S3 bucket.

Here is the link to the two Git-Hub repositories for the project.
https://github.com/coreyjjames/REACT-PRACTICE-APP-GRAPHQL
https://github.com/coreyjjames/GRAPHQL-REALWORLD-API-TYPESCRIPT

RealWorld API – TypeScript, JWT, MongoDB, Express and Node.js

Hello, Welcome to my blog!

Recently, I subscribed to a tutorial website called Thinkster.io. Thikster has tutorials dedicated to making production-ready applications. They have tutorials for many different frameworks. I decide to go through their node.js tutorial.

I also wanted to get more comfortable with typescript, so I changed the tutorial up some by implementing the tutorial using TypeScript. The tutorial is written initially with regular javascript. I had the extra challenge of translating the tutorial to use TypeScript as I went through it. Going through this tutorial was a great experience. I learned some great techniques for building an API with node.js and TypeScript.

Programming with TypeScript was enjoyable. It cleaned up the code allot! Which is always a great thing. Since I have programmed in the past, with C, C++ and C#, I also found working with TypeScript very familiar.

I posted my code for this project on my Github. https://github.com/coreyjjames/REALWORLD-API-TYPESCRIPT

The tutorial also covered Postman. Postman is an application that allows you to test your API. I liked it allot, I have lightly used Postman in the past, but this time I used it extensively. I love how you can write test cases in Postman. It was handy at the end of the project to check for any bugs that got missed during the central development time.

In the next couple of weeks, I would like to improve this API some more by using a framework called GraphQl.

I’ll post another blog post when I finish!

If anyone has some improvements I can make to the code, let me know. 🙂