Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my twitter for updates and feel free to reach out if you have questions. Thanks for your support!
Link to the deployed project: Link
Link to the repo: github
This project took me 4 days to complete. I started it on Saturday and assumed it would be done in a couple hours, since the tutorial it's based on is only 3 hours. I ran into several bugs and even a couple of areas where I had to write code that was different from the tutorial to get it to work without errors.
The result is a fully functioning Instagram knockoff with auth, users, posts, comments, and a handy flagging system that deletes a post if it's inappropriate. Please y'all- if you see something inappropriate in the app I am counting on you to remove it :)
I'm not going to write a ton about this because I have a personal rule not to work past 1 am and it's now past 2 am- but here are a small handful of rules I learned.
1. Material UI is powerful, but has a learning curve
Material UI is the UI system this web application is built with. There are only a few components in this application that use it, but where it's used it does make nice, well-styled components.
2. You can center things with
This was amazing to me. One of those funny basic html tricks you learn late in your coding career. You can center thing quickly by making the elements you want to center children within the <center> tags. It's a breeze to horizontally center now.
3. Firebase is still easy
I know there are alternatives now and I'm curious to see how they go, but Firebase is still an excellent, well fleshed-out system for serverless programming. With a few clicks and a few pre-built functions you can get going with authentication, file storage, and a NoSQL database. You can even store collections (like a table in the SQL world) inside of documents (like a row in the SQL world).
I'll be making more React-Firebase projects in the coming weeks so will talk more then about how I got them to work and dive deeper into the code. For now, feel free to peruse my Github repo for this one and by all means watch the tutorial! This CleverProgrammer tutorial is one of the best I've seen, and it's up to date and fun, which are priceless :)
Top comments (0)