#11 The React Frontend | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

We are making good progress but we didn't implement a user interface so far. Let's change that by adding our React frontend now!

----------

----------

• And you should of course also follow @academind_real.

See you in the videos!

----------

[godhandinfamous]

I will never get tired of you explaining everything, every lines. Thanks for always being so thorough

[RudraStorm]

Best Graphql course on the internet. Thanks man 😀

[ibrahimandaw]

We are improving a lot with you Max...Thanks for your awesome job

[kosovoisserbia]

If you want to use functional components and the newest react-router-dom synax:

import React from 'react';
import { BrowserRouter, Route, Navigate, Routes } from 'react-router-dom';

import Auth from './pages/Auth';
import Bookings from './pages/Bookings';
import Events from './pages/Events';

import './App.css';

function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Navigate replace to="/auth" />} />
<Route path="/auth" element={<Auth />} />
<Route path="/events" element={<Events />} />
<Route path="/bookings" element={<Bookings />} />
</Routes>
</BrowserRouter>
);
}

export default App;

[alon]

Love the content - thanks for creating this for us. Are you planning on showing how to deploy, test and continuous test/deploy as well?

[reyshinryu]

liking every single video in this series. thank you so much Max for this course!!

[gksdmltk]

I love your lectures SO MUCH! Really easy explanations, well concreted steps for learning and shadowing.
Thank you for uploading your perfect lectures,
and I have a question :
+Will you handle Apollo in this series?

[ShallOnTheRoad]

Thanks Max! Really good explanations till now. I really enjoyed your videos. I believe that's should be a good project to setup yarn workspaces/monorepo repository

[xavierdupont]

I noticed in the previous videos that you made many errors could only be discovered at runtime. Once the react part is done, I think it would be interesting to have your views about how unit or integration testing can be added to the project in a meaningful way.

[abdous-is]

ahh finally the frontend, going from backend to frontend is like being in big city the whole time where you can only see for 10 meters and finally drive out to the valley where you can start to see far into the horizon.

[EugeniaChe]

There is a useful extension for vs code called "ES7 snippets" which allows you to use shortcuts to auto fill new components, for example rce + Tab key and it pastes boilerplate code for a class based component.

[YauhenKavalchuk]

This is a very awesome channel! I really like Academind and especially the format of lessons. This guy inspired me to create my own channel for russian-speaking web community. I would love some support/feedback. So, if you are interested in this, welcome.

[ankitbhanderi]

Happy to start writing code again in react

[denysmorozov]

As always - the best. Thank you. I'm working with Gatsby.js + Express (GraphQL API) for now. Really interesting.
Can you describe "error handling" in this course more clearly? I mean something like - res.status(400)...

GraphQL set status to 500 for all errors and it's a little bit confusing.

[edwardsernas]

If we wanted to use the Nextjs framework; instead of just react, do we need to start with a nextjs project and move all of the backend files into the api folder? Thus, turning the original app.js responcible fore handling graphql post requests into a 'index.js' within the api folder of a nextjs project?

[sivakrishna]

Hi Max, excellent series so far, would like to see permissions for users like admin, user, etc..Will you be working on graphql course for udemy listing soon?

[geannyhernandez]

Thanks for this awesome courses, i am learning a lot, i hope some day i can buy your udemy courses, Thanks!!!!

[theitalian]

very clear instructions ... thank you for the videos!!! :))

[jefferiusherek]

Very random question but what icon pack are you using in VS Code? Also Great tutorials still easy enough to follow with only slight adjustments for updates!

[jacas_]

Hi Max, how would you go about deploying this GraphQL server to e.g. Heroku? I found some guides but their setup is different and so I'm struggling to get my head around it. Thanks