For the past ten days, I've been dedicating a few hours each day to complete Brad Traversy's course on Udemy titled React Front to Back, 2022 on Udemy. It was meant to last for 14 hours but after almost completing the final project which was a house market place app created in React and Firebase, he added the long awaited MERN stack app which added 6 extra hours. I was happy and deflated at the same time because I'd hope to complete the course on a Friday. The extra hours meant I could only complete it on Sunday Monday with the way I had structured my life.
Anyway, I am done and I just want to share the things I'd posted for myself to mark those days:
My diary
Day 1
I have started with Brad Traversy's React Front To Back 2022 course on #udemy and I have finished the first project which was to build a Feedback UI app, using JSON server for the back end.
I am officially starting the #100daysofcode again for myself and the first project which I have now hosted on #netlify can be found here:
In my time away, I've seen new changes in the react-router-dom. We now have a version 6 with new syntax, so that is interesting.
For this project, I worked with React Context and HTTP requests, routes and the form needed for the feedback. I'm excited about continuing this journey till the end of 100 days.
Day 2
I completed my second react project from the course I'm taking by Brad Traversy . It is a Github finder app -
https://lnkd.in/dPiD6mf3
Successfully deployed on netlify.
Concepts practiced in the app:
Reducers with the UseContext Hook. Even though it wasn't necessary to create two separate context providers; the alert context provided and the GitHub provider to fetch the users, it helped to see how a bigger app would be worked on with Reducers.
I also worked with Daisy UI for the first time. The project was done with tailwind CSS. Not my favorite CSS framework to use but it did the job and I'm happy with the result.
Day 3
Today was spent in the advanced React Hooks section of React Front To Back 2022. Things like useRef, useMemo and other hooks like useStorage and useCallback. Saw three use cases of useRef and the usefulness of useMemo in memoization, although I noted that we don't want to abuse this React hook as it might not be necessary in many instances except in particularly large projects. Also, useRefs can help with memory leaks and that's great to know.
Day 4
I have started my new project. It is a marketplace app for users to add listings of their homes. Today, I worked on creating routes for the signin, signup, forgotpassword, offers, and explore pages. I used useNavigation and useLocation in the Navbar.js file. I also set up firebase and created a new collection manually, enabled authentication and created indexes for the offer, type and useRef.
Day 5
Worked some more on the sign-up and sign-in pages for the marketplace React app. Completed the section for saving and registering a user to firestore.
Day 6
I continued yesterday after my update with SignIn, Logout and Alert pages. Used toastify for the first time for error messages and the useAuthStatus Hook. As for today, I worked on the Explore page for the House MarketPlace app. Fetched listings from firebase and created the Listings form. This part of the project was a lot and I feel I need to review it again because of all the new syntax.
Also, set up billing to get geolocation api for the app and learnt to upload images to firebase. This is what it currently looks like now:
Photo is of the app in development mode on my web browser
Day 7
I finished building the house market place app and have deployed it on Vercel. The link to my project can be found here-
https://lnkd.in/dpQgFg7p
Features added:
The contact page to reach out to the landlords of the listings
Worked with Leaflet map and the Slider component
Pagination(ten per page)
Edit and Delete functionality for logged in users.
I'll be reviewing this project again before proceeding to the final project which is the MERN tickets app which was added to the course today.
Day 8
I started working on the MERN tickets project.
Things I did:
Set up my mongo db compass
Created my express server
Added routes and controllers for register, login and to get a particular user
Also added private routes for the api/user/me routes
Tested and it all works fine in postman
Added auth and errorMiddlewares
Day 9
Spent the day working on the front end section of the support tickets MERN stack app. Worked on authenticating users and on the redux set up. Created pages for the Register, Login and Logout pages. Also worked on the ticket and user models and routes.
Day 10
I've completed my final project with react redux - the support ticket app and it's now live on heroku
Users can add and change the status of tickets submitted as well as add notes.
All content is mine unless stated otherwise