I am building https://sponsorvisa.me/ website and write down things that I learn when building this website. If you don’t follow my blog, following is brief description about this project
- Part 0: Why I build this project https://medium.com/@hadoan/scratch-your-own-itch-build-a-visa-sponsor-job-listing-web-9be30b124268
- Part 1: Create a simple Golang API https://medium.com/@hadoan/create-a-simple-golang-rest-api-with-mux-and-mongodb-9808ed6884a2
- Part 2: GatsbyJs frontend (this article)
Why GatsbyJS?
Recently GatsbyJS is trending in developer community and according to Stackoverlow it is top 5 most loved framework!
To build a gatbsy, you need to familiar with react.js, the framework provide lots of good tutorial at here, so I share a basic steps here
- Install Gatsby CLI
npm install -g gatsby-cli2. Create new gatsby project
gatsby new job-seeker-web https://github.com/gatsbyjs/gatsby-starter-hello-world
- Components folder will be used to store all components (e.g Layout, Header, Footer,…)
- Routing for gatsbyjs is very convenient, you need to add javascript file to pages folder
3. Create new components folder, add layout.js file
4. Create homesearch.js component, do same for Menu and Footer component!
5. Modify index.js file to use layout
6. And here is the result!
7. This is how I organize components for my job listing page
- Index page use Layout and FeaturedJobs components
- Layout use Menu, HomeSearch, Footer components
This is result after few hours I practice gatsbyjs
This is quite a simple website, I’ll improve the UI and compare with Angular framework in later part.
The data is returned from golang Rest API in this https://medium.com/@hadoan/create-a-simple-golang-rest-api-with-mux-and-mongodb-9808ed6884a2
I put the full source-code here https://github.com/hadoan/no-border-jobs/tree/dev/src/job-seeker-web
