As someone who only recently considered and found an interest in software as a career, I recognize how intimidating the idea of starting a side project can be. The truth is, side projects are one of the most important parts of tech careers, which makes this beginner's anxiety completely understandable, albeit just a tad problematic. That's why I created the very app that I knew would motivate me, and hopefully others out there in the same position to get started. Inspired by the theme of Hack Girl Summer 2.0, I wanted to design an app that would help bridge the gap in tech careers and encourage girls, non-binary folx, and all minorities who hadn't considered a career in tech before, to kick start their hopefully long and happy path in software.
What it does
SPOT is a project planner and management web app that eases the daunting task of starting a new side project, aimed towards new programmers. This app is perfect for those starting out, but it is just as valuable to veteran hackers who struggle to finish projects before moving on to another. SPOT will get you started by documenting the name and main idea of your project. By inputting a hopeful deadline, the app will encourage you to keep at it and finish your project. Lastly, to help you stay on track, break your project up into smaller components (categorized by front-end or back-end) with their own completion deadlines. Colour-coded tasks will help prompt you to complete tasks and check them off as soon as possible. With our minimal but aesthetic UI, you’re bound to start completing those awesome half-finished projects.
Features at a glance
- Oversee all the components that you have completed, are yet to finish, and those that are delayed
- Document all your ideas for the purpose of the project, features, and end-goals to keep in mind as you progress through development in the Notes section
- Sketch out flow charts, logos, designs and more in the Sketches section
- See the month at a glance with upcoming task deadlines to be aware of
- Keep track of all components that need to be finished today in the To-Do section
How I built it
I programmed this app in Django and used JS to make a more interactive UI. Projects and components are stored in a SQL database as their own models, each assigned to individual users so their projects and tasks cannot be seen by others. By accessing the database in the views.py file, I was able to display project information and tasks in each template. The calendar makes use of the Calendar Python module and is displayed in a table. The tasks displayed in the “To-Do” section of the calendar page display tasks that are filtered in views.py with deadlines set for the current day. The “next” and “previous” arrow buttons in the calendar that toggle between months function by storing the month integers (e.g. 6 for June, 7 for July, etc) in their datasets, which are parameters for the calendar view.
Adding a component is done through a form, which creates the component as an Event model object. To know when tasks were completed/incomplete without refreshing the page, I used a fetch PUT method in JS to set the task as completed/incomplete and changed the colour of the parent div. The canvas for sketches uses mouse capturing adjusted to the size of the canvas and pointer movement event listeners (to allow for pen tablets to work as well). Changing the brush to an eraser or clearing the canvas uses buttons with event listeners to change the canvas context stroke style or clears the canvas entirely. Each time a stroke is made on the canvas, the function is called for each pixel the pointer is clicked and held.
Challenges I ran into
- Splitting up front-end and back-end tasks in the templates
- Figuring out how to add the erase function for the canvas
- I made the User model last and when I tried to add it in I had to adjust all the pre-existing models
Accomplishments that I'm proud of
- Designing and styling the site entirely on my own (no bootstrap, etc)
- Completing a project
- Creating something I will personally use
What I learned
- How to add a calendar to a Django template (using the Python calendar module) that also displays events users can add
- How to add a canvas that users can draw on with JS
- How to persevere and finish a project within a time limit!
What's next for SPOT
Deploying it so it's fully functional to users! I would also like to add a "productivity garden" feature or perhaps a page where I can feed Spot treats based on the number of hours I've coded.