📚 Estante Virtual

Objectives   |    Lessons Learned   |    Technologies   |    Environment Setup

This application was proposed by HeroSpark, as part of their recruitment process for frontend developers. The challenge was to build a fully responsive client application using Vue, Vuex, Bootstrap and SASS to consume a simple REST API served by JSON-Server, with basic authentication, CRUD for books and search/filter mechanisms, abusing of creativity.

Check out the application running!

📝 Objectives

• Create a web application using Vue.js and Vuex JavaScript frameworks;
• Use Bootstrap styles framework and integrate SASS;
• Require basic authentication mechanism for user to navigate in the application;
• Allow user to sign up, providing basic info like name, email and password;
• Dispose of borrowed and loanable books, showing its name and a thumbnail;
• Allow users to search for saved books;
• Display book details and allowed actions - borrow, return, edit info (if it belongs to user);
• Allow user to register new books to add to the bookshelf;
• Dispose list of books user borrowed;
• Dispose list of books user made available;
• MUST have a responsive UI;
• Implement automated tests;

🏆 Lessons Learned

• Build and run a basic REST API using JSON-Server;
• async/await syntax to handle asynchronous calls; 💗
• Structuring Vuex modules and functionalities;
• Use guards to access certain routes;
• Integrate SASS to a Vue project;
• Overwrite Bootstrap defaults and creating new themes using SASS/SCSS;
• Deploying a JSON-server application to Heroku Railway Render;
• Deploying a Vue.js app to Vercel Serverless Cloud;
• Migrating project from Vue 2 to Vue 3, using Composition API and script setup;
• Migrating project from Vuex to Pinia;
• Migrating project to TypeScript;

🚀 Technologies & Resources

Frontend:

• Vue.js v3 (originally developed in v2)
• Pinia v2 (originally developed in Vuex v3)
• VueRouter v4 (originally developed in v3)
• Axios (HTTP client)
• Bootstrap v5 (originally developed in v4)

Backend

• Node.js LTS v18 (originally developed in v12)
• JSON-Server
• Render Cloud Server (previously deployed on Heroku and Railway)

Development:

• Visual Studio Code
• Cmder (terminal emulator)
• Vue CLI v5 and Yarn/NPM scripts routines (originally developed in v4)

🔨 Setting up the Environment

Before running the application copy/rename file .env.example as .env. The existent value should work already, so no further configuration should be required. When building for production, however, you may want to add a .env.production and copy the same variables you have in .env, replacing the localhost reference to a valid address on the internet, where the API will be available (e.g.: https://estante-virtual.herokuapp.com).

Make sure to have Node.js 12+ installed in your machine and yarn (or npm) commands available in your terminal, then use the following routines:

$ yarn         # Download dependencies
$ yarn start   # Run JSON-Server
$ yarn dev     # Run development server for front-end
$ yarn build   # Build files for production