Table of Contents
This is my Capstone Project for the BrainStation web development Sep-Dec 2022 cohort.
It is an app that visually clusters 30min blocks of a given day.
I chose this project because I am an avid time tracker. This was the perfect chance to test what I have learned in the bootcamp as well as test how creative I can be when designing the visuals of the app.
The app core functionality is to track how a user consumes a 30min block (48 of these in a whole day) and visually presents it to the user.
A user can have a list of tags (a tag is an absolute activity description that can be resused), and each tag can be dragged to the appropriate time slot.
Everytime a tag is dragged to a timeslot, the donut chart on the bottom right gets populated dynamically. The donut chart legends description are also rendered dynamically, if 3 tags are used, then the donut chart will only have 3 tags visually represented.
Overall this project has challenged me greatly. I had to learn how to style my components that fits the "neo brutalism" style. I also had to learn and deeply research how to manipulate data in the database using SQL queries.
Enjoy the usage of my app as much as I had fun developing it.
Please look into the Show Case section for more explanations on what I implemented on this project.
NOTE (to the TAs) Explanations of the functionality of my app can be seen at the Site Structure section.
FRONTEND
BACKEND
To get a local copy up and running follow these simple steps.
Have mySQL installed with a default connection with user 'root' and password 'rootroot'
install mySQL workbench(Windows)install mySQL (Linux)
install mySQL workbench(MacOS)
Make sure to create a database/schema called:
"Time3Dime_DB"-
Clone the project repo
git clone git@github.com:allansomera/allan-somera-capstone-time3dime.git
-
Enter the cloned project directory
cd allan-somera-capstone-time3dime
- go into the 'server' directory
cd server - rename '.env.sample' to '.env'
mv ./.env.sample .env
- install all the packages
npm i
- Run all migrations and seeds
npm run setup
- go into the 'client' directory
cd client - install all the packages
npm i
- go into the 'server' directory
cd server - run the start script
npm run start
I would classify this as a single page app. The landing route when the app is first mounted is:
"http://localhost:5173/user/1/day/1"I have designed my app where in the future, it can used by many users after they have signed up for an account.
You can choose a 'tag' from the 'tags' column to be dropped in a droppable
timeslot (00:00 to 23:30).
The color of the draggable tag will turn black with it's dropshadow remaining
as yellow.
The color of the droppable timeslot will change when a draggable item
is hovering on top of it.
You can change the date by clicking on a day from the datepicker. Upon clicking
on the date it will load the data on that given day.
If there was no previous data on the selected day, it will load 48 brand new
timeslots.
If the selected day had previous saved data, it will load that data from the
database.
Everytime a user drags a tag into timeslot, the donut chart gets rendered
dynamically. Essentially, this donut chart will count how many tags are used
within the day. The count that is represented on each section represents
30mins, you need to divide by 2 to get the total hours.
Upon clicking on the save button, it will save the current day and post the
data into the database.
-
What I learned from this whole capstone project is that you really do need to have a set design, even it it just a low fidelity wireframe. Having a set goal to how a component should like saves you a lot of time when actually styling it through css.
-
Choose a theme/design and stick to it. Having a set theme makes it easy to design your components.
-
Experiment. Once you have a clear goal in mind, now you can be more creative, you are able to style around this goal, and once you experimented how a certain component should look in different ways, you can choose which one will fit the best towards the flow of your site.
- Take time how each data will saved into your database.
Each represented data entity => new table
ie:
user => user table
tag => tag table
user having a list tags = userBytag table
etc...- take your time building the entity relationship diagram
- not only I had to learn how to use SQL queries, I also needed to transform them to be executed by knex query builder
- learned that each knex callback returns a promise, so I had to be mindful when speaking with the database that I don't have a whole bunch of knex promises executed at the same time (this populates your promise queue). It does affect performance when writing data to the approriate table(s)
- Implement new account signup
- Implement habit tracking functionality
- Implement journal entry per day
- implement 'add' tag functionality per user
- implement a more extensive summary page
- implement the representation of 'hours' in the donut chart
- Rewrite save functionality, having a null value on a timeslot is not handled properly in the save function
- Re-ordering of tags in tags column isn't implemented correctly
Distributed under the MIT License. See LICENSE.txt for more information.