A flexible, simple and clean progress bar app. This app can display different types of information in an intuitive progress bar component. If you have a data integration that you think would fit this project, please open a pull request! I want this project to foster an environment of creativity, flexibility and community.
- ⌨ TypeScript - Ensures a friendly and welcoming development environment
- ⚛ React - Used for a easy, reusable way to create progress bars
- 🚅 NodeJS - Does the heavy lifting and fetching
- 🤝 SWR - Keeps data in the frontend up-to-date
- Clone this repository
git clone https://github.com/wyatt/tasktracker
- Install nodemodules/ for backend and frontend
cd frontend && yarn
cd backend && yarn
- Add a .env file in backend/ Populate it with env variables for the progress bars you will use, visible below. Note: If you are using a Progress Bar that you haven't entered any credentials for, the backend will error. Available base env variables include:
PORT=8888
# If this is added/changed, it needs to be changed in the API_BASE variable in frontend/core/mutations
- Run both the backend and the frontend servers.
backend $ yarn build && yarn start
frontend $ yarn build && yarn start
- That's it. You should have:
frontend: http://localhost:3000
backend: http://localhost:8888
EDULINK_USERNAME="yourusername"
EDULINK_PASSWORD="yourpassword"
EDULINK_DOMAIN="yourdomain.edulinkone.com"
ESTABLISHMENT_ID="yourid"
# Establishment ID is visible in the response from https://yourdomain.edulinkone.com/api/?method=EduLink.SchoolDetails
# Use inspect element to find
RESCUETIME_KEY="yourapikey" # Can be created and found at https://www.rescuetime.com/anapi/manage
- If your progress bar requires any API keys/secrets (highly likely), add your
.env
variable to theenv
class insrc/env.ts
- Add your fetch hooks/API calls as exported functions in a separate, clearly named file in
src/methods/
- Add a method in
src/routes.ts
in this general syntax
api.get("/<method>", async (req, res) => {
res.json(await <API function>(env.<api_key>));
});
Note: Add any custom types (interfaces) in src/types.ts
TailwindCSS is used to style components. Simply define your styles in the className={}
prop! If you're unsure, read the tailwind docs and look at the existing progress bars.
- Add a
useSWR
hook insrc/core/hooks.ts
defining the type of the response insrc/core/types.ts
- Add your Bar component in
src/components/
with the naming convention<Service>Bar.tsx
- Use the container components in
containers/
. Use the existing components for implementation examples. Avoid using normal html tags, instead, defer them to a appropriately named component incontainer/
- For the actual bar, use the
helper/TaskBar.ts
component. The bar supports multiple colors as you can see from the "Screentime" example. To have multiple bars pass props in this syntax to the TaskBar component:
<TaskBar
bars={[
{
percent: 0.6,
color: "black",
name: "value1",
},
{
percent: 0.4,
color: "blue-500",
// Color names are tailwindcss colors.
// View them here: https://tailwindcss.com/docs/customizing-colors
name: "value2",
}
]}
/>
That's it! Send it as a pull request and I'll check it out and (most likely) merge it!