The UI is finished!
Well, the first iteration of the minimum viable product’s UI is finished anyway! But, this is a huge step on the way to a working application.
Use the link below to check out the app for yourself. Keep in mind that this is designed with mobile users primarily in mind, so it displays best on a mobile devices when you've added it to the home screen! To do this in Safari, hit the Share button and then click "Add to home screen".
There’s no backend or sessions yet, so you will have to create an account each time you join, and your roasts will not be saved between sessions. We will need a database for this!
My Full-Stack Process
I thought that since the frontend is now completed enough to begin work on the backend logic and database design, that it would be a good stopping point to discuss how I like to work on a full-stack application.
This is just my method, and I’m still green, so this may change for me over time.
Design and UI
This is where I like to start with an application. I will roughly list out all of the major pieces of functionality that I want to have in the application. For this one it was:
- I want to be able to time my roasts and record break points
- I want to be able to save those roasts to go back and look at later.
- I want the % weight loss of the roast to be calculated for me.
These were my primary objectives. Then I decide on a tech stack. This is very loose. Things will change as I build and that flexibility is important.
For this project:
- Frontend application: React
- API: Express
- API Server: Node
- Databse: Postgres
With a tech stack in mind, then I start to work on all of the UI design of the application. I shoot for the moon here. The question shouldn’t be, “do I know how to code this?” It should be, “Ideally, what do I want a user to see when using this application.
I use Figma for the UI design process. I don’t spend too much time here, but I want to have an idea of the look and feel of the application before I start coding.
Begin with the end in mind.
Creating the UI Application
From here, I like to move into creating the entire front end with mocked data.
For this application, I created a little “fake database” that contained mock roast data and a user that contained what I think I’ll need for a user. All of that lives in my mock directory in a couple of files that just contain arrays of objects.
Why arrays of objects? Well, when working with most APIs, and the API that I will be designing, this is the format of the data that you will receive back. When the json that is recieved has been parsed, this is what will be left!
Why use a "fake database"
This makes the refactoring process much easier when I have to connect the frontend application to the API and database. Since I’m preparing the application to receive information in the same way that it will actually be delivered, all I will have to change is the controller functions!
Take a look. Here’s my current function for getting a roast from the mock database:
// getRoast with "mock database" stored in `user.roasts` object
export const getRoast = (id, user) => {
const foundIndex = user.roasts.findIndex((item) => item.id === id)
if (foundIndex) return user.roasts[foundIndex]
return null;
}
And all I have to do to make this ready for the API is:
// getRoast from the API using fetch
export const getRoast = async (id, user) => {
const foundRoast = await fetch('##/roast')
if (foundRoast) return foundRoast;
return null;
}
Since the data is coming in will be formatted the same as if I was mocking it, I shouldn’t have to change any more of this!
Designing the Database
After the front end is done, it feels most logical to me to work on where the actual data will be stored.
I don’t want to start here, because you will always find some piece of data that you forgot about while you’re building out the UI.
You want the database that you’re desiging to be specific to your needs, that way you’re not storing data that you won’t need or use, and that you have all the data that you need for your application.
Create an API
At this point, we want to create the API using a tool like Postman to make sure that we’re actually getting the data that we expect back.
I like to do this after creating the database, because, if you wait until creating the database, then you will inevitably have to come back to the API to refactor everything to ensure that the data you expect is being returned.
Connecting and Deploying
At this point, you want to hook the API into your frontend as the data source. Then make sure that it works through testing in your local environment.
Then, it’s time to start pushing it into a deployment environment. I haven’t decided for sure where I’d like this one to live. There are plenty of generous free tiers to take advantage of, but I think that AWS is the most configurable and most generous, but it’s not as automatic as Netlify, which provides very helpful logs as you’re trying to get something up.
The deployment process will involve installing a database, a backend application and a frontend application. I haven’t given too much thought to how I’m going to do this yet, but you can be sure that I’ll write about it when it comes to that!
The Full Process
I try to think about what different parts of the project are going to need to minimize the amount of refactoring and frustration throughout the application building process.
Starting with a design and a plan is vital, then moving to the frontend you discover everything that your backend will need to be able to do. After the frontend is complete, you have a good idea of the data that you will need, so you build the home for the data and hook it up to an API. Then after the API and frontend application are communicating, move into deployment!
I hope this peek into my brain was helpful if you’ve never tried to create a full stack application. And if you are more experienced and see some gaps in my process, leave me a comment and let me know your approach. I’m always looking to improve my process and to get better at my craft!
Check Out the Project
If you want to keep up with the changes, fork and run locally, or even suggest code changes, here’s a link to the GitHub repo!
https://github.com/nmiller15/roast
The frontend application is currently deployed on Netlify! If you want to mess around with some features and see it in action, view it on a mobile device below.
https://knowyourhomeroast.netlify.app
Note: This deployment has no backend api, so accounts and roasts are not actually saved anywhere between sessions.
Top comments (0)