elemashige/cyf-final-project-starter-kit

Fork of https://github.com/textbook/starter-kit for CYF final projects

Hi 👋, I'm Ele Mashige

A passionate Software Developer Trainee at CodeYourFuture

• 🌱 I’m currently learning SQL, React, Node, and Express

• 💬 Ask me about CSS, HTML, JavaScript

• 📫 How to reach me [email protected]

Connect with me:

Languages and Tools:

 

cyf-final-project-starter-kit's Issues

Create a filter functionality for trainee dashboard

Admin dashboar add CSS setting

Create trainee access input

1. As a trainee, when i get to the homepage, i want to enter the GitHub username, so i can access the tracker system with githubId, so that I know it’s showing my data. And be redirected to the trainee's page.

How to populate the cohort name in trainee dashboard

As Trainee I would like my cohort name , to check my current milestone against the next progress.

Adding Date

As an admin I want to be able to add dates

Remove TrackerTable from admin dashboard

Create css file for admin trainee tracking page

After creating the front admin page to track trainee progress, we need to create css file and make this admin page elements have a good position each to look good.

Removing extra input in the Trackprogress component

As far as the Track Progress component is concerned, the admin would only need to insert the cohort name and see all the trainees records and milestones required to be on track.

Adding Milestones

As an admin I want to be to add Milestones

Rearranging Coderwars rank

Adapting the codewars column to show the rank than showing the scores

Changing codewars ranks to Q

Admin Dashboard css

Replacing inline css with css file in the admin dashboard/dashboard home title

Create api to get milestones data by cohort id

https://docs.google.com/spreadsheets/d/1pJswf4qYPWT4fw3-NYqmmgBnwCuV3SMnxfzBqiOUiYg/edit#gid=719802574

Create api to create cohort

url: /api/cohort

https://docs.google.com/spreadsheets/d/1pJswf4qYPWT4fw3-NYqmmgBnwCuV3SMnxfzBqiOUiYg/edit#gid=719802574

List all of Modules on dashboard-frontend

After selecting an option, a module table will appear, this table is related to the selected option

Create api endpoint to get cohort from github username

https://docs.google.com/spreadsheets/d/1pJswf4qYPWT4fw3-NYqmmgBnwCuV3SMnxfzBqiOUiYg/edit#gid=719802574

Working on Media Queries

As far as small screens are concerned, I preferred to target them with css by adjusting different screen sizes

Fixing a bug on the trainee username input

There is a bug on the trainee login username. The bug is about an empty input still fires the onSubmit event while it's supposed to require the username to be inserted

Trainee tracker table add CSS setting

Create trainee page

1. As a trainee, i want to see my cohort name and my ID / name displayed on the tracker page/s as soon as I log in, so I am confident of the results
2. As a trainee, i want to see my current PR's, and current codewars rank

Update codewars kyu

Create Logout button + functionality

Create tracker table in the admin dashboard

The table should have CRUD functionality.

database for milestones,cohorots,trainees

Create database table

1. Create cohort table
2. Create milestones table
3. Create trainee table

https://docs.google.com/spreadsheets/d/1pJswf4qYPWT4fw3-NYqmmgBnwCuV3SMnxfzBqiOUiYg/edit#gid=719802574

Create basic backend server

In the existing repository, create a new folder called backend and initialise a new package inside via npm init, and set up a simple Express server in it.

The server should have a single envpoint under / that returns a 200 status code and a "Hello World - this is the backend" message. DO NOT start coding routes or other components - this ticket is small on purpose to give a base for everyone to iterate on.

Once done, move this ticket in review, create a PR, and notify your teammate that a review is required.

Populate my Trainee cohort name in my Dashboard

Remove modules component

Update frontend application to redirect to login page if not logged in

Display milestones requirements on the trainee's page

Create api to create milestones

url: /api/milestones

https://docs.google.com/spreadsheets/d/1pJswf4qYPWT4fw3-NYqmmgBnwCuV3SMnxfzBqiOUiYg/edit#gid=719802574

CSS for AdminTrackerTable.js file

Create Admin trainee tracking page

As far as the admin page is concerned, the admin would want to track trainees progress according to :

1. the cohort name ,
2. starting date,
3. ending date to see how they are each doing against the milestones.

Adding the Cohort Name

As an admin i want to be able add a new cohort name

Set up database connection for backend server

Update the Express backend server to use a psql package, and create a database for this application in your local Psql instance.

• The application must connect to the database and print a notice of success before the server start. In case of failure, it should exit the program after printing the error message.
• The application must read username and password for the database from a .env file that is added to gitignore to avoid leaking the password to the world.
• This is a shared project, the database needs to work on your teammates computer too. For this ticket to be completed, beside having a working connection, you must update the README.md file with instruction (step by step, including the commands( on how your colleagues can create the same database as you did.

Create a dropdown for modules and milestone column

The columns are in the admin dashboard.

Adding Trainee

As an admin I want able add a new Trainee

Create basic frontend app

In the existing repository, create a new folder called frontend and initialise a new package inside via npm init, and set up a React application via create-react-app.

The application should have a single page that show a "Hello World - this is the frontend" message inside a Div. DO NOT start coding routes or other components - this ticket is small on purpose to give a base for everyone to iterate on.

Once done, move this ticket in review, create a PR, and notify your teammate that a review is required.

Create home page css file

To keep jsx page clean, I decided to create a css file keep all css styles in one place than looking at inline css

Fixing a bug in css dashboardhome file.

After creating a css file in dashboard home, we found that the two buttons one for update modules and the other for tracking the trainee progress were both joined and looked bad so we had to separate them in css

Create css file in the admin Admin dashboard

To make the jsx look clean , I created a css file to replace the inline css for the admin dashboard home body