My current project is a Simple DB (database) that houses all the collectibles I like and more. (I'm well into my Pokemon, Yu-Gi-Oh, and the like, I'm big a nerd basically what you expect from a developer)
The problem I was having is that I like various different collectibles and I wanted them all in one place. Now I know there are plenty of well-coded and graphically awesome websites out there that do what mine does. However I didn't want all that, I wanted something simple easy, and a quick reference guide.
This is why I created Simple DB.
Let me give you a run down of the current "Tech Stack" (This is basically the technology I'm using to get the job done)
- VS Code (IDE)
- React
- Javascript
- React bootstrap (FE Framework)
- Axios (for my API Calls GETS, POSTS)
- React Router (for navigation)
- Github (for repo storage)
- Github pages (free website hosting and easy implementation through the repo)
VS Code
On a day-to-day basis (for my full-time job) I use Intelli J Ultimate. Now don't get me wrong Intelli J has some great features and I am very familiar with it. This is why I went for VS Code I wanted this whole project to be a learning curve, including the tools and language I work with (other than Github something just works). So far I am liking it. It's the same concept really, I just like how the project folders look/ feel and there seems to be an extensive list of plugins compared to IntelliJ well plugins I want to use.
React
So once again in my day-to-day, I am a Scala developer and have been for a while now. React has always been on my list as something I wanted to look into and the concepts of components and states are something that interests me. I rolled the dice and went for it.
Javascript
Feels like you can't do anything these days without some scripting and to be honest at work we don't do much so I wanted to get some scripting involved and relearn what I think I know.
React Bootstrap
I am no FE (Frontend) Developer or in fact a UX designer. This is mainly the reason I choose to go for a simple design. But this framework has some good
documentation and some good stack over the following.
Axios
After looking through various methods to basically reduce the boilerplate for the standard GET, POST requests
Axios seems to be the best option. The documentation is all there and seems to go well with React, according to some stack overflow searches.
React-Router
Digging through react-navigation options.
React-router cropped up. Routing is basically the navigation between pages or the concept of pages in react. Plus it had React in the name it had to be legit.
GitHub
GitHub is something most of you are aware of. It's basically just an online storage option. It's a place to push your code and have it stored online. Saves the risk of losing everything on your local device. GitHub allows for pushing commits (new bits of code), reviewing those changes (making sure you haven't don't anything wrong), and merging those commits into your main branch (the main branch is basically the current code that for lack of a better word your active branch).
GitHub pages
I choose GitHub pages after a lot of searching. It's basically because it's free. The only issue is that GitHub Pages is a static hosting website. This means that you can't directly hit a URL outside of the main GitHub page URL (or custom domain). Now, normally that would be an issue. However react works on what they call the DOM (Document Object Model) it basically means that when the website is first loaded, so hits the home URL. It loads the rest. It means you can route to other pages without refreshing the page which gives the illusion of moving pages but it's actually a static website. (When using hashing routing anyways)
This is the overview of the Tech stack I would be using. I, unfortunately, started the project before I started this blog so I'm backtracking here a little and will be over the next few posts but I'm hoping to catch up with myself pretty quickly and become the inline as I'm doing it Blog I want to be.
So I'm going to finish each post the same. With an effort level and time spent table.
| Effort Level |
Time Spent |
| Low |
5 Days |
Scott
0 Comments