https://github.com/juliolmuller/estante-virtual
Project developed as part of a challange to front-end developer in HeroSpark.
https://github.com/juliolmuller/estante-virtual
bootstrap collaborative-library hero-spark json-server vue
Last synced: about 2 months ago
JSON representation
Project developed as part of a challange to front-end developer in HeroSpark.
- Host: GitHub
- URL: https://github.com/juliolmuller/estante-virtual
- Owner: juliolmuller
- License: mit
- Created: 2019-08-16T18:54:29.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2025-01-26T17:11:49.000Z (over 1 year ago)
- Last Synced: 2025-01-26T17:27:30.772Z (over 1 year ago)
- Topics: bootstrap, collaborative-library, hero-spark, json-server, vue
- Language: Vue
- Homepage: https://estantevirtual.vercel.app/
- Size: 2.88 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
:books: Estante Virtual
Objectives |
Lessons Learned |
Technologies |
Environment Setup
This application was proposed by [HeroSpark](https://herospark.com/), 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!](https://estantevirtual.vercel.app/)
## :pencil: Objectives
- [x] Create a web application using Vue.js and Vuex JavaScript frameworks;
- [x] Use Bootstrap styles framework and integrate SASS;
- [x] Require basic authentication mechanism for user to navigate in the application;
- [x] Allow user to sign up, providing basic info like name, email and password;
- [x] Dispose of borrowed and loanable books, showing its name and a thumbnail;
- [x] Allow users to search for saved books;
- [x] Display book details and allowed actions - borrow, return, edit info (if it belongs to user);
- [x] Allow user to register new books to add to the bookshelf;
- [x] Dispose list of books user borrowed;
- [x] Dispose list of books user made available;
- [x] MUST have a responsive UI;
- [ ] Implement automated tests;
## :trophy: Lessons Learned
- Build and run a basic REST API using [JSON-Server](https://github.com/typicode/json-server);
- `async`/`await` syntax to handle asynchronous calls; :heartpulse:
- 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;
## :rocket: Technologies & Resources
**Frontend:**
- [Vue.js v3](https://vuejs.org) (originally developed in v2)
- [Pinia v2](https://pinia.vuejs.org/) (originally developed in [Vuex v3](https://vuex.vuejs.org/))
- [VueRouter v4](https://router.vuejs.org/) (originally developed in v3)
- [Axios](https://github.com/axios/axios) (HTTP client)
- [Bootstrap v5](https://getbootstrap.com/) (originally developed in v4)
**Backend**
- [Node.js LTS v22](https://nodejs.org/) (originally developed in v12)
- [Bun.js v1.2.24](https://bun.sh/)
- [JSON-Server](https://github.com/typicode/json-server)
- [Render Cloud Server](https://render.com/) (previously deployed on [Heroku](https://heroku.com/) and [Railway](https://railway.app/))
**Development:**
- [Visual Studio Code](https://code.visualstudio.com/)
- [Cmder](https://cmder.net/) (terminal emulator)
- [Vite](https://vite.dev/) and [bun](https://bun.shm/)/NPM scripts routines (originally developed in v4)
## :hammer: 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 18+** installed in your machine and **bun** (or **npm**) commands available in your terminal, then use the following routines:
```bash
$ bun # Download dependencies
$ bun start # Run JSON-Server
$ bun dev # Run development server for front-end
$ bun build # Build files for production
```