Code the Dream Labs Logo

Code The Dream School

Main hub for class materials for Code the Dream’s classes

React Practicum: Week 1

Project Definition & Setup

Get your project and yourself set up for success on your team

Activities

As a Team

  • At your first weekly meeting, you should cover the following project details. Have one group member take notes as you go, write the information in a Slack message and pin it to your group’s channel for later reference. 
    • What will you be building? 
      • What problem does your app solve?
      • What elements will you need? Outline your database’s models and relationships. 
      • What features will you include? Outline what users can do with your app. 
      • Check out this list of 60 ideas if your group is stuck!
    • What are the expectations of each group member?
      • Agree on a time, place, and format for weekly group meetings.
      • Consider group norms like responding to messages in a timely manner, and building on one another’s ideas.

On Your Own

  • Each team member should do this tutorial to start the week. You’re going to be learning a couple of big new things in this tutorial that will be super useful for your final group project. Don’t worry, they are all super easy to get started with! Most importantly, Firebase, which we will be using to prototype our backend and handle user authentication. Second, this tutorial will give you a quick intro into NextJS, a really powerful tool for building server-side rendering React apps that is quickly gaining ground as a go-to choice for building React applications.
    • Important note one: You will want to run <npm install firebase@8.2.3> instead of just <npm install firebase>. Firebase >9 has a breaking change that would require some refactoring to make work. 
    • Important note two: Create a .env.local file and add it to your .gitignore. It should look like this, but with the values that you get from the Firebase console when you create your new “Firebase web app” 
  • Your config should look like this instead of what is in the book. You 100% do not want to commit any code to GitHub with your API keys exposed!
  • Now, add .env.local to your .gitignore file so it is not committed
  • After you have each gone through the tutorial individually, your group can choose which repository you want to move forward with. If you are significantly more comfortable with create-react-app, you could pretty easily abstract the Firebase-config away and use the rest of the Firebase code with a create-react-app, but we really like the simplicity of this tutorial as an intro to Firebase and the Firestore database.
  • Here is a working repository for NextJS based on the tutorial you can use as a starting point. 
  • Here is a working copy to the same app but done via create-react-app
  • Conclusion and Next Steps: So, now you have an app that is reading from and posting to Firebase and handling registration and authentication, but it has a long way to go. How would you go about restricting blog posts to specific users? (hint: You probably also want to create a user collection in your db in addition to having them saving in the authentication table in firebase)  How do you edit and delete items from a collection? Understanding data structures and all of the different ways we can structure data flow of an app is also super important for front-end developers, and this is a great opportunity to get your feet wet and fight through a lot of really important items. 

Other probable next steps: 

  • A Header, a footer, and potentially a layout component to wrap around your pages. 
  • A CSS framework, Material UI (mui), Chakra, semantic-ui-react, and react-bootstrap are all good options and are allowed in this project. You are not required to write all of your CSS from scratch.

Resources

Creating your App and Getting Started with Firebase + NextJS

General Project Setup and Teamwork