Collab-Anno 6/16/2020

Written by: Rajen Tandel

Yesterday I finished refactoring the React code to use conditional rendering instead of so much React Router. React Router is still useful for displaying the pdf based on a URL. I was trying to use it to distinguish between the logged in and not logged in portions of the application. It was clearly not the right way to go. Luckily I fixed that early since I don’t have too many components yet.

Today I’m going to implement the PDF search component. I already have this component working fine, but fitting it into the application as it stands is a little different. Currently, searching for a PDF takes the user to the annotation screen and Socket.IO creates a room for that PDF. I will definitely have to allow the user (the teacher) to define rooms. Otherwise each of his/her students will be annotating the same document. That would be very messy.

I’ll try that today. I’ll just put a checkbox with a label that says “Create New Room”. The workflow isn’t completely defined yet but having this working will help.

Collab-Anno 6–15–2020

Written by: Rajen Tandel

Today I’m going to clean up some of the components I built last week. I was trying to work a little fast and that was a slight mistake. My state management is completely off and I’ll need to rethink it. While reading a book on React, the author suggests writing up the HTML/CSS before adding state to the components. I should’ve done something similar. Refactoring is the goal for today.

Collab-Anno 6–14–2020

Written by: Rajen Tandel

Today I’m going to take a step back from directly working on the project and read a little more into React. I need to learn how to style components in an effective way. SASS has been recommended quite a few times so I’m going to give that a try. The app is coming along well though. I built a lot of the critical components this week. For the coming week, I will rethink the state management and begin styling some of the components. This week is more about learning than developing the app. As I learn about using SASS within a React application, I will try to implement the techniques. I’ve found that if I don’t work like this, I forget a lot of what I read.

In addition to styling, I’ve been learning about Jest and testing React apps. This week I’ll be implementing Jest tests with all of the existing components to make sure everything is functional. The app is small enough that I can click around and input the data myself but the automated tests will help in the long run.

Collab-Anno 6–13–2020

Written by: Rajen Tandel

The RegisterUser component was implemented yesterday. It can now send data back to the dashboard page. This is not how the workflow of the application will work once the backend and database are attached.

For now, the app allows a user to register, login and add courses. The plan is to rename classes to courses. Calling the classes courses will fix some annoying name clashing later.

The next step is to make it look nice.

Plan for today:

  1. Sketch a few designs.
  2. Learn the basics of SASS and implement some styles on the Landing Page.
  3. Build the PDF List page.

The plan for tomorrow is to create the PDF List component. This will be arbitrary local PDF documents for now. It will eventually allow the user to upload his or her own PDFs.

Hey thanks a lot for this. This was so helpful.

Written by: Rajen Tandel

Hey thanks a lot for this. This was so helpful.

I was trying to implement a login/register component. I’m using React router so I was trying to figure out how to send the data back to the landing page. The app will use a database for these things later.

Thanks again

Collab-Anno 6–12–2020

Written by: Rajen Tandel

Yesterday I got the round trip of a teacher logging in and logging out. This will have to use data from a database and have some string parsing to validate inputs. Implementing the back end will be for another day. The piece of advice I liked from the React book, to start with with basic HTML/CSS and add state in later. I’m still just learning React so deciding where to place the application state seems to be a complicated matter. For now, the app simply manages whether somebody is logged in or not.

Today I am going to build a functional registration component. There is a button that takes the user to this page. It isn’t connected to a database or anything so it is just a static form for now. I’m going to have it update an array with the new user. Then use that array to compare the login page credentials against.

Collab-Anno 6–11–2020

Written by: Rajen Tandel

Yesterday, I implemented an input field and an add button to allow the teacher to add a class to his/her list. Today, I’m going to implement conditional rendering to check if somebody is logged in and act accordingly.

This may be a matter of passing props around.

If somebody is logged in, the person will see his or her dashboard. I will also need to add the logout button

Collab-Anno 6/10/2020

Written by: Rajen Tandel

Today I am going to plan out a portion of the “Logged in as Teacher” page. For now, it only contains a list of classes. Maybe I should add an AddClass Component next. That’d be helpful for when the teacher is creating a new class. I’ll go ahead and do that today. Ran a little late on this one.

Collab-Anno Daily Report 6/9/2020

Written by: Rajen Tandel

On Sunday I put together the basic contents of the homepage when not logged in. Today I will build out the interface for when the user is logged in. For now, I am working on the page for a registered teacher. He or she will be able to add students, upload PDF files and assign these to students. The students (or the student’s parent if a younger student) will receive an email when the teacher assigns the PDF. The student will then create an account. The dashboard will contain the student’s assignments. The annotations the student makes to the document will be saved via a save button that will be added to the PDF component. The teacher will be able to see the student’s annotations as they work.

Action items for today:

  1. The LoggedInTeacher component (name under construction).

Collab-Anno Daily Report 6–7–2020

Written by: Rajen Tandel

Yesterday I managed to get a basic registration and login form. Next step is to design the landing page. The landing page can be pretty simple.

It will include:

  1. An introduction to the application
  2. The login form
  3. A button for the registration form.
  4. A link to the github repo.

Easy enough to develop today. I haven’t written a detailed about yet so I’ll just be using some lorem ipsum text as a placeholder.