Planning a Coding Project
Starting a new project from scratch can be an overwhelming and daunting task. There are so many details to think about, especially when it comes to creating a new website or designing a new app. I find it best to start with a rough outline to get things going.
As an example, I was tasked with creating a one-page web application for my software engineering course at Flatiron School. It was our first major project, utilizing all of our knowledge gained thus far of HTML, CSS, and lots of JavaScript. My project partner and I met on Zoom to brainstorm some ideas of what exactly we wanted our app to do. We decided to create a “Start My Day” app where a user inputs how they are feeling and what tasks they wanted to create for the day. In total meta fashion, the app we created could be used for planning our project itself!
We started by creating a Google Slides deck to keep track of our notes and ideas. I find that Google Slides is great for organizing notes into sections, multi-functional with adding text & images, and very easy to set up & read once completed. There is also a comments section below each slide for more detailed information.
Here is what we added to our planning slide deck:
- Slide 1: Description of app, user interaction, and stretch goals
- Slide 2: CSS styling ideas with a color palette
- Slide 3: A visual representation of what we wanted our app to look like
- Slide 4: Foreseen challenges we could face
If given more time, we could have definitely added more slides and details, but this was a great place to start. I particularly liked having a visual companion because it gave us a goal of how we wanted our page to appear at the end. It was the building blocks of all the elements of our code. That helped us determine what kind of JavaScript we needed to write in order to get that code working on the page.
The project we started is just one example, but planning a coding project can include numerous other details like:
- Tasks broken down by section
- Task due dates
- Needs vs. wants
- Map out an app flowchart
- Relevant links (to images, GitHub, styling boards, etc)
- Notes for bugs & fixes
If you find Google Docs a little too dry, there are a bunch of project management apps that can help you start to plan a coding project as well. Kanban boards are one example of tools to visually see tasks broken down into waiting, in progress, and completed stages of a workflow.
Here are a few apps that can help with project management:
As my class started to go over React, there was even more planning that could be done within this style of JavaScript frame working.
In learning more about React, I find that it’s useful to create a component tree. You can include which components will pass which props and functions and where states will live. I also find it helpful to create a wireframe of sorts, much like a flowchart of all the components that will be included in the app including parent/child components.
If you are working on a project with a partner or group of other engineers, it’s also great to utilize GitHub for storing and sharing code with each other. We also used Visual Studio Code (VSC) as our code editor. Once you are ready to start coding in VSC, it’s great to first begin with pseudo-code so that you have an initial idea of what you want your code to do before diving in.
Overall, planning will ultimately help you organize and map out all the details you want your project to hold. A great plan makes the to-do’s much easier in the long run. The more detailed the plan, the less you will need to stop mid-way through a project to figure something out. Think of planning simply as a blueprint to work form. Like builders making a home, there are larger structures to build first and then smaller tasks that fill in the rest.
I hope this will be a helpful guide to you when starting out a coding project!
