Step 2: Wireframe UX/UI

As most developers know, even when you “know how to code”, it can be really overwhelming to embark on the creation of your first full-stack app. The JavaScript ecosystem is incredibly vast: with package managers, modules, build tools, transpilers, databases, libraries, and decisi...

If we weren’t using a Cloud-Based Database, this would have been the time to write our Back-End Express routes. But since we were using Firebase, which is already in the cloud, we just worked to set up our first successful Database listener.

We spent the final two days Simulating every user flow we could think of and hunting our App for bugs. This process was not the most systematic, but we found plenty of bugs to keep us busy.

We were using Firebase to store our data, so we deployed to Firebase hosting. We also bought a cheap domain name on namecheap.com to make our App more polished and easy to find. If we had a longer runway, step 12 would have been to run A/B testing on users, so we could better understand how actua...

• It could hold user image uploads in its cloud storage
• It included WebSocket integration for real-time updating
• It could handle our user authentication and offer easy OAuth integration

We set up a Github repo, on which we prevented merging to master to force ourselves to review each other’s code. We also created an agile board on Waffle.Io, which is free and has easy integration with Github. We would each create git branches for the user story we were currently working on.

• ability to create new goals, milestones, and checkins
• ability to delete goals, milestones, and checkins
• ability to change a timeline’s name, color, and details
• ability to zoom in on timelines
• ability to add links to resources
• ability to upload med...

Once we had an MVP of the functionality we desired in our app, it was time to clean it up and make it pretty. My team used Material-UI for components like form fields, menus, and login tabs, which ensured everything looked sleek, polished, and coherent without much in-depth desig...

In my past life as a consultant at IBM, I led Ideation workshops with corporate leaders. I suggested to my group the classic Post-It Brainstorming strategy. We all scribble out as many ideas as we can — even ‘ stupid ones’. After generating a few dozen App ideas, we sorted them into categories to ga...

Our next step was to create a “proof of concept” for our App. This meant finding a Front-End library to satisfactorily render Timelines. We connected it to Firebase successfully to display some seed data.