I built this project to test my understanding of using and working with APIs, Nuxt.js, pagination, component-naming conventions, and handling dynamic data.
Tech stack:
# clone repo
$ git clone `<repo name>`
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
# build for production and launch server
$ npm run build
$ npm run start
# generate static project
$ npm run generateThe challenge of this self-directed project was to be able to generalize my knowledge from the past couple months of learning Vue.js. I saw this project listed as a take-home assignment in an entry-level developer interview so I decided to take it on and finally break away from tutorials.
Adapting it for my own goals, my challenge was to:
- Design the interface (UI)
- Create style guide for UI elements
- Use the https://anapioficeandfire.com API
- Include image optimization
- Filter API response
- Paginate API call
- SEO
- PWA
And users would be able to:
- Paginate characters
- Filter character names and allegiances
I first started on Adobe Xd for the app design and style guide. I worked on creating the app layout and making it responsive. After finishing touches, I moved on to developing the app with Nuxt.js and deploying it to Netlify.
I had initial issues with deployment on Vercel where I had issues with it not being able to find the app's entrypoint. In my nuxt.config.js, I had set my router config to
router: { base: '/got-reel/' }
. I was reading articles on Nuxt.js deployments by other developers and went down the wrong path. I realized that was likely why my deployment to Vercel didn't work. So, I took out the router config out, transferred to Netlify, and my deployment worked.
Built with Nuxt.js (for SEO and PWA) and HTML/CSS. The API is from https://anapioficeandfire.com.
Note on design: The app was not meant to have lots of design overhead (animation, trendy design, etc.) as emphasis was placed more on functionality (Could I successfully fetch the API and work with it? Does pagination work? What if there is a 404 error?). However, I have created the minimum design specs for brand color, typeface, and page layouts. In more complex applications, I would have a more "fancy" design!
- Debbie O'Brien - Youtube on Nuxt tidbits
- Creating Nuxt.js error pages - https://nuxtjs.org/docs/2.x/concepts/views/#error-page
- Vue Mastery - for all things Vue.js, and the best Vue.js tutorials 💚
- Vue.js and Nuxt.js team - for amazing documentation 💚