Repository
https://github.com/olatundeee/projecteer
As stated in the introductory post for the projecteer project, I am seeking to implement a platform where users can manage projects/tasks/content and create teams for their brands or any of their creative pursuits while getting rewarded with steem/sbd.
In the introductory post I also spelled out a list of proposed features some of which were added in the post.
This update talks about the newly added features of the project and how they were implemented
New Features
User Registration
I added a user registration form to allow users create an account for login purposes. During registration the user has to submit email, username and password.
In order to implement this feature I created a component signup. In the html file I created the registration form using the code in the screenshot below
In the .ts file for signup I grabbed the form data and sent it to the service file using the block below
I created a service services/user that will accept the data from signup and send it to the backend using a http request.
In services/user the screenshot below is responsible for user registration
In the backend, I created a route file for users routes/users.js. The screenshot below displays the code handling user registration in routes/users.js
I also created a data model in the backend that dictates the parameters to be stored as user data in the database.
The file for the user data model can found in models/users and the code is shown in the screenshot below.
To access the registration form a user has to navigate to the route /register from the client side , on that view the user will see the form and they go on to enter their details.
The screenshot below shows the registration form.
This feature was committed to Github alongside the feature in the next section, all codes for this commit will be found in the commit link after the next section.
User Login
On the front end I created a new component login that will handle login operations for the user.
While logging in users have to submit the email and password they used during registration.
In the html file for login component I added a form that accepts login data and sends it to the ts file for login.
The code for the login form is shown in the screenshot below
In the ts file, the method login() is responsible for grabbing the form data and sending it to the user service
The code for the ts file is shown in the screenshot below
In services/user the following code screenshot is responsible for accepting data from login component and sending it to the backend for authentication.
In the backend file routes/users the following code block accepts the login data and executes the authentication.
The block above accepts the login data as a http request, the first thing it does is to check the login email if it exists in the database.
If no user was found a response is returned stating User Not Found.
If user is found the block then proceeds to compare the password provided with the one registered on the database.
If the compared passwords do not match a response falsifying the authentication is sent and no token is provided.
If the compared passwords match a response validating the authentication is sent and a token is provided for the session.
routes/users also uses the data model at models/users for database data structuring.
On the front end, to view the login form the user should navigate to /login. The login interface is shown in the screenshot below.
The codes for login/signup functionality can be found in the commit in the shared link below
https://github.com/olatundeee/projecteer/commit/204e2e64599e4ba10b1782ce4ecaca0ae926f63f
Adding Team to A Project
For every project created by a user the user has the liberty to create a team for the project so that other users can join to encourage collaboration between platform users.
I added a new component add-new-team which lets users create one team per project.
In the html file for add-new-team the screenshot below shows the code for the form.
The ts file implements a method addTeam() which will grab the form data and send it to teams service to be sent to the backend.
The code for add-new-team ts file.
I created a service file for teams in services/teams. In services/teams I implemented another method addTeam() which receives data from add-new-team component
The received data is then sent to the backend in form of a http request.
The code for addTeam() in services/teams
In the backend, I created a new file for teams routes at routes/teams.
In routes/teams the following screenshot shows the code that executes the add-new-team request.
The code block in the screenshot above accept data through the request body and uses the data to create a new document in the teams database and finally proceeds to send data from the created document back as a json object.
The data model for the teams can be found in models/teams and is also shown in the screenshot below
When adding a team to a project from the front end, the user has to submit the following information
A name for the teamProject being handled by the team:- This field will be pre-filled since a team can only be assigned to one project. The project to be handled by the team will be determined by the project chosen from theprojects listpage before redirecting to theadd new teampage.Team Lead:- The field for team lead is also pre-filled and the value is the username of the currently logged in user who created the project and is creating the team.Team Description:- This field is expected to contain information and details on what the team is about, expected responsibilities of the team members, nature of project tasks and other miscellaneous details.
In order to add a new team users can navigate to dashboard/teams/add-new-team.
The screenshot below shows the add-new-team form
The link to the commit for add new team feature
https://github.com/olatundeee/projecteer/commit/92acec6ea6363440d5f1c5acb6ee6667ae87fb8e
Viewing Team Details
After creating a team for a project we need to have an interface where we can view the team details.
To create this interface I add a new component view-user-teams.
The html for view-user-teams contains the following code.
In the screenshot above we have collection list and on the list we have list items containing the data we added when creating the team for the project.
In the ts file for view-user-teams, I implemented the ngOnInit() method which allows the containing block to run once the page loads completely.
In ngOnInit() I made a call to teams service to get the details of the specified team from the backend and return it to view-user-teams.
The code responsible for that operation is shown below.
In services/teams I implemented the method getProjectTeam() which makes a http request to the backend and returns the team details data from the database.
Code for getProjectTeam()
In getProjectTeam() , I made a post request to the api using the if the chosen project and the team lead as request body.
The returned data will be the document that contains that project Id and team lead id sent in the request body, and since only one team can be assigned per project we can always expect only one object to be returned.
In the backend route file routes/teams I implemented the following code
When the route /get-user-team in routes/teams is called the block executes by firstly searching through the database for one document containing the team_lead_id and projectId sent in the request body.
Any matching document will be sent back as a response.
To view the team details on the front-end the user should navigate to /dashboard/teams, the view is shown in the screenshot below
The link to the github commit for this feature
https://github.com/olatundeee/projecteer/commit/f6ad94d1ca21199f515eb3ab797735765e14eba7
About Projecteer
To know more about what projecteer is about you can check out the introduction post for more information
How to contribute?
You can contribute to the project by forking and cloning the github repo(link shared at the top), running npm install in the project root directory(backend) and client directory to install all dependencies.
To start the backend server navigate to the root directory and run the following command
SET DEBUG=projecteer:* & npm start
To start the frontend server navigate to the client directory in the project folder and run the following command
npm start
Before working on the project kindly contact me on discord at the handle gotgame.