Back to all blogs

Kickstarting a new project

A multi coloured 2025 diary.A lady pinning items onto a moodboard.A piece of paper titled 'To do'

As I continue to develop my frontend development skills, I've recently started thinking about a new solo project to work on. The New Year seems to have sparked some inspiration, leading me to decide on creating a goal tracker called Pinpoint. Part of this inspiration also comes from my recent purchase of a Clever Fox advanced weekly planner (I definitely recommend!)

For this project, I’ve decided to document the process as a way to reflect on my learnings and articulate my ideas and reasoning - to someone, or rather, to a screen in this case.

This week, my progress log entry focuses on the planning stages…

Planning

While learning frontend development, I’ve found it much easier to code when I take the time to plan what I want to create. It saves me from staring at a blank screen, unsure where to start - avoiding the overwhelm and lack of productivity that often follows!

The three areas I focus on when planning are features, functionality, and the languages or frameworks I will be using.

Features

Creating Goals

It’s no surprise that the main feature of this project is allowing users to create goals. However, Pinpoint also provides a space where users can 'pinpoint' why and how they will achieve those goals. Additionally, users will have the option to set a deadline and choose a reward to encourage themselves when setting the goal.

Goal Levels

When adding a goal in 'Pinpoint,' users can choose between four levels: 'Easy,' 'Moderate,' 'Hard,' or 'Stretch.' Each level includes a short definition to help users select the appropriate level for their goal.

These levels also function as filters, allowing users to sort goals by level or display only goals of specific levels.

Progress Bar

Pinpoint will feature two progress bars: one for tracking the progress of individual goals and the other for monitoring overall goal progress. Users will mark progress by checking off items from their to-do list.

Choose your own theme

Not everyone enjoys pastel color schemes like I do, so users will be able to choose their own from a selection of pre-made themes I’ve created.

Countdown

Pinpoint will display the date at the top of the screen, with an optional countdown to the end of the year. While some users might find the countdown stressful or anxiety-inducing, others may find it motivating and helpful for staying focused on their goals.

Functionality

It’s great that I’ve outlined the features for Pinpoint, but now I need to figure out how to implement their functionality.

What I outline below will likely evolve as the project progresses, but it will serve as a solid starting point:

  • Create Goals - This feature will include a form with fields that can be edited after the goal is saved to Pinpoint. The data will be stored locally using LocalStorage in the user’s browser.
  • Goal Levels - I will implement the ability to filter goals by level using React Router’s search parameters.
  • Progress Bar - Each item on the to-do list will be added to a unique array, and the progress bar will calculate its fill percentage using the formula 100 * completedToDos / totalToDos. When an item is marked as complete, the bar will fill by the corresponding percentage. I’ll likely use CSS animations to display the progress, but I’ll need to do more practice and research in this area.
  • Colour Scheme - Each color scheme will be stored in its own variable and will update the colors of specific elements through their associated CSS classes.
  • Countdown - I will use JavaScript’s Date function to create a countdown to the end of the year (31 December). The calculation will subtract todaysDate from endDate.

Final thoughts on this week

Looking back on this week, I’m pleased with the progress I’ve made in planning ‘Pinpoint.’ Knowing the features I want to create has made it less daunting to begin designing the application in Figma next week!

The features may end up functioning differently than described in this progress log, but I’ll highlight any changes and explain why they occurred as I continue to update the project’s progress weekly.