How we built our first full-stack JavaScript web app in three weeks - Deepstash

Bite‑sized knowledge

to upgrade

your career

Ideas from books, articles & podcasts.

published 12 ideas

How we built our first full-stack JavaScript web app in three weeks

medium.com

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...

STASHED IN:

4

Next, on a white board, we drew out the basic views we envisioned in our app. We incorporated our set of user stories to understand how these views would work in a skeletal app framework.

STASHED IN:

3

  • 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

STASHED IN:

3

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.

STASHED IN:

3

Because the JavaScript ecosystem is so complicated, we opted not to build our app from absolute ground zero. It felt unnecessary to spend valuable time wiring up our Webpack build scripts and loaders, and our symlink that pointed to our project directory. My team chose the

STASHED IN:

3

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.

STASHED IN:

3

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.

STASHED IN:

3

  • 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...

STASHED IN:

3

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...

STASHED IN:

3

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.

STASHED IN:

3

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...

STASHED IN:

3

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...

STASHED IN:

3

0 Comments

Discover and save more ideas by creating a

FREE

Deepstash account.

Develop a

reading habit

, save

time

and create an amazing

knowledge library

.

GET THE APP: