Papers (FE)
A Reddit-style web app built with React
"Frontend problems are like a dot..."
-Kev
TL;DR
Built on the foundations of Papers (Backend), Papers (frontend) is a Reddit-style web app built using React. It employs best practices for mobile first development, state management, optimistic rendering, and error handling.
Objectives
- Plan and build responsive web app with React employing mobile first strategies
- Make use of optimistic rendering for patch and post requests
- Use hooks for state management and asynchronous functions
- Interpret and handle client and server side errors
Summary
Papers culminated our backend sprint into a full-fledged functional web app built with React. While React is admittedly overkill for the needs of this project it's primary purpose was to familiarise us with building apps in React, optimistic rendering, handling frontend errors, and consolidate our learning of hooks, states, and components.
Although basic CSS styling was encouraged along the way, it was made clear this was only of secondary importance.
Through this sprint I also learned the importance of planning to keep things functioning smoothly.
The build
Initially I struggled with frontend. Working on the assumption frontend would be entirely about "making things look pretty" I found myself in for a rude awakening when dealing with the DOM. Even after learning how React negated the need for directly dealing with the DOM, I still awaited the point where frontend became less technical and more beautiful.
By week two of frontend module I accepted that was never going to be the case.
Having accepted that frontend would be harder than backend, I started this build entirely with MUI components to avoid losing my sanity in a maze of flexboxes. MUI's syntax wasn't intuitively simple as I'd hoped so I relied heavily on YouTube tutorials to push through this.
At the start of the project we drew plans for our components, paying special attention to props and states that would need to be passed around. This was not only for our own benefits in devlopment but we'd also need to submit this along with any helpdesk requests.
Naturally, as a first timer my plan was pretty botched which I discovered on my first helpdesk call where I found some of my states were held too low or too high. In fairness it's difficult to understand what any of this means until you get stuck in and break things and figure out what went wrong.
If you're not breaking things, you're probably not learning.
By the end of the week, I had a very ugly but working app and two outstanding tickets to complete after the bootcamp.
Once the pressure of project week had passed and I was free to revisit this sprint in my free time, I challnged myself to make some as beautiful as it was technical. Inspired by this Webflow theme I stripped back as many of the orignal MUI components as possible and set myself a goal of trying to rebuild this theme as best as I could from scratch. I'm happy to say I succeeded without getting lost in a flexbox maze!
The Wins
Mastering CSS debugging
Having built websites before, I've experienced firsthand the frustrations of deubgging layout issues. Endlessly tinkering with margins, padding, flexing, positions to try to get things right and chalking things up to "mysteries of the web" when they go wrong. I was grateful for being introduced to Chrome's developer tools which made this so much easier. The web is no longer mysterious to me!
Finishing...eventually
In total this project took 10 days to complete. Five days on the course and five days after. The upside of finishing in my own time also came without the benefit of having helpdesk available. As you'll read in the challenges section below, frontend issues are TOUGH. It's a testament to my resolve that I could complete this at all using only docs and what I'd learned from Northcoders.
The Challenges
Debugging React
On a helpdesk call on day three, my mentor and I scratched our head over why a function I had written wasn't working as expected. By all accounts, it should have worked. After an hour troubleshooting we landed back at function that, while syntactically different, was very similar to the code I started with. Nonethless it worked. When I asked why, he said "I don't know. React just didn't like that". He continued on to say "Backend problems are like a circle; most things that can go wrong are fenced within it. Frontend issues are like a dot; the problem could be anywhere."
Re-rendering non-deleted comments
For reasons I'm still unsure of, I haven't figured out how to re-render a deleted comment after its API call fails. That's to say I dont know how to revert its optimistic rendering. If you have any ideas, I'd love to hear them.
Routing via URL
After deploying this app, I found that React routers browser router wasn't behaving as it should. While the URL in the browser updates as expected, if you navigated directly to the same URL or even refreshed the page you'd be met with a 404 page. While I assumed this had to do with client side vs server side routing, I found my colleagues didn't have this issue despite having the exact same setup. To circumvent this I used a Hash Router instead.
If I started over I'd...
Explore other CSS libraries
MUI is brilliant at what it does and I'd love to use it again in the future. For the purposes of this project it's syntax was added an extra learning curve that cut into the actual development time. Instead, I may have opted for Tailwinds or Bootstrap.
Lift some states to app
A few components like the ArticleGrid and CommentsList require a fetchUsers function that then maps the users relevant variables (e.g. ariticle authors and comment authors). In retrospect, these asynchronous functions slow down some page loads. Performance could be improved by setting this state at app level and passing it through props.