MVP stands for Minimal Viable Product. The goal is to create a web application that functions on a basic level. MVPs do not focus on front end design.
Here is a lovely link that will send you to a MERN stack repo. This repo is for a Mongo DB but I have faith in you to switch it to MySQL.
https://github.com/dotbehrens/fullstacktemplate.git
Before you start writing your first line of code you need to decide what you are building, and what you will use to build out your app. For this MVP I will be using a MERN stack.
M: I will use MySQL for my database
E: my server will use express
R: My front end will be rendered in React.
N: and My runtime environment will be node.js
I will be using the OwlBot Dictionary API, which requires an API Key. My app will consist of a search bar for the user to type in words and look them up from the API.
Now that I know what I plan to do. My first step will be to get an API key and check if it will work on Postman. It is important to look at the documentation for your API as it will tell you how it likes to be spoken to. Think of this as the API's love language.
Luckily Owlbot is pretty clear about what it wants from this relationship
tes
Owlbot will ask for your email address and send you an API Token to use to access its database. For security reasons, it is best not to share your API key. This includes not pushing it up to Github for public view. We will cover how to do that a little further on. For the sake of examples, I am going to pretend my API_Token is 'koalakoala'.
The best practice is to test our API key before we start coding.
Using Postman we will create a get request setting the headers as below.
Now let's open our coding environment and create a .env file. Inside of this file, we will declare an API_TOKEN environmental variable.
This is only half the battle to keep our API_TOKEN secure. Next, we need to make a .gitignore file so that when we push up our projects the computer knows not to push up the files in the .gitignore.
In my .gitignore file, I reference the bundle.js, which is a file that compiles my code, my node modules, and my .env file. Now my API_TOKEN is safe and sound.
Alright, next up we are going to render our front end. Our front end needs an input text box for our search queries and a submit button.
We should also add in a title so that our user knows what they are looking at. In a separate component, we should render a result from the query.
There isn't really a need to mess with the index.jsx file right now but let's take a look at it anyway.
Here we import the necessary react files including REact and react-dom as well as the root react component we are creating. We re also importing a CSS file to style our app. Finally, we are using React.DOM.render to render our component to the DOM.
We will leave it there for now. Part 2 next week.
Top comments (0)