Friends Manager

Introduction

In this project we will manage our friendships. This won’t be just a contact book. It will be an app where we will keep track of the people we consider REAL friends. The main objective is to keep track of how much attention we’re giving to our friends. So not only we will have our friends details, but also data about our frequency of communication with them.

We will be dealing with a more advanced way of managing state in React. We will use Redux to keep a central state management system so you don’t have to pass it around using props and pointer functions. Managing state with props is ok for small projects, but as soon as our system have more than a few layers, it can quickly get messy. Managing state in a central location will reduce the amount of code and make debugging much easier. Not to mention the visualization of the data pathways within our app.

Requirements

  • In this app you'll keep data about the friendships you want to cultivate.
  • You can choose which properties you want to have in your "Friend" model, except that you need to have a "LastContactDate" and a "LastContactType" and a "Desired Contact Frequency" properties
  • You're also required to have a "Category" table, which will be linked to your "Friends" table by a foreign key.
  • Users should be able to easily visualize the friends that are getting the least attention (i.e. Last contact date has been longer than desired contact frequency)
  • When adding a new friend, the form should contain a dropdown with the Category.
  • You need to use Redux for state management.
  • You need to handle validation and server errors.

Resources

Adding onto the resources of our previous React projects, you’ll need to find out how to use Redux:

Angular Material can be tricky at first, but trust us, you’ll learn to love it and once you master it, you will never look back. But as always, reach out in our Discord community if you get stuck!

What you'll learn

  • You won't find many tutorials of React-Redux with C# Web Api. But with the knowledge of the previous React projects you should be able to setup the required front-end and call a C# server.
  • Initially don't worry about styling. Make sure everything is working as intended first and add styles in the end.
  • Since you're new to Redux, you might need to create a "stepping stone" project where your only focus is to learn redux with a very simple app (i.e. todo list).

Challenges

  • Once this project is done, I highly recommend you create two forks for two different ways of managing state: Context API, and Recoil.
  • Find a way to get an e-mail sent to user with warnings such as : You haven't contacted John in 14 days!
Log in to mark this article as read and save your progress.
An unhandled error has occurred. Reload 🗙