https://github.com/juliolmuller/studying-vanilla-javascript

Simple system for data manipulation with JavaScript client-side. Full sample of a CRUD (create, read, update & delete) with use of the local browser storage.
https://github.com/juliolmuller/studying-vanilla-javascript

adminlte crud vanilla-javascript

Last synced: about 2 months ago
JSON representation

Simple system for data manipulation with JavaScript client-side. Full sample of a CRUD (create, read, update & delete) with use of the local browser storage.

• Host: GitHub
• URL: https://github.com/juliolmuller/studying-vanilla-javascript
• Owner: juliolmuller
• License: mit
• Created: 2019-01-27T21:44:05.000Z (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2022-03-26T16:35:55.000Z (almost 3 years ago)
• Last Synced: 2023-03-05T06:29:02.630Z (almost 2 years ago)
• Topics: adminlte, crud, vanilla-javascript
• Language: HTML
• Homepage: https://juliolmuller.github.io/studying-javascript-crud/
• Size: 8.5 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  :books: Simple CRUD with Vanilla JavaScript





  Lessons Learned   |   

  Technologies   |   

  Environment Setup   |   

  Features





  

  

  

  

  



![Application snapshot](./src/img/app-overview.jpg)

Frontend web CRUD application developed to refresh knowledge of DOM manipulation using vanilla JavaScript (no frameworks). This project was proposed and developed in [Hcode's Udemy course](https://www.udemy.com/course/javascript-curso-completo/), an awesome one - :smiley: highly recommended!

[Check out the application running!](https://juliolmuller.github.io/studying-javascript-crud/)

## :trophy: Lessons Learned

- ES6+ class notation;

- `localStorage`/`sessionStorage` API;

- `FileReader` to convert binary files into a Base64 encoded string;

- HTML `data-*` custom attributes API;

- How to create an app based on [Admin LTE 3](https://adminlte.io/themes/v3/);

- Overall tips on DOM manipulation;

- Bundling the application with [Parcel.js](https://parceljs.org/)

## :rocket: Technologies & Resources

**Development:**

- Visual Studio Code

- Parcel.js (for application bundling)

## :hammer: Setting up the Environment

Make sure to have **Node.js 10+** installed in your machine and its **npm** available in the command line, then use the following routines:

```bash

$ npm install   # Download dependencies

$ npm start     # Run development server

$ npm run build # Build files for production

```

## :zap: Features Implementations

- [x] Restore saved users from browser's local storage;

- [x] Create new users;

- [x] Edit existing users;

- [x] Delete existing users;

- [x] Save changes to browser's local storage;

- [x] Upgrade UI components to AdminLTE 3;