Skip to content

redaelgoumri/sispos

Repository files navigation

Logo

SISPOS DASHBOARD

Clean POS Dashboard made using the PEAN Stack.


Technologies



Features

  • Locally stored data (Postgres)
  • Personal API
  • Fast & Simple
  • Easy to deploy
  • Full Data C.R.U.D





Screenshots

The Main Login Page the user gets Directed to upon loading the website.
Main Page

The Login Page, the user is redirected here if he selects the Login option in the page earlier.
Login Page

The Dashboard Main Page, the user is redirected here only upon a successfull login process. Dashboard Main Page

Tables, where the user can see full details on all system data, with crud options.
Here are two examples : Clients Table
Categories Table

The Task Manager, where the user can manage personal tasks and delete completed tasks.
Dashboard Tables




Color Reference

Color Hex
whitesmoke #F5F5F5 #F5F5F5
sky gradient #2980B9 #2980B9
primary gradient #4A00E0 #4A00E0
warning gradient #f5af19 #f5af19
light gradient #78ffd6 #78ffd6
info gradient #5D26C1 #5D26C1
danger gradient #93291E #93291E





API Reference

SISAPI

Sispos uses SISAPI P.E.N API for all data.

  • Full API Reference can be found at the page.

COUNTRIESAPI

  GET /${file-type}/${country}
Parameter Type Description
file-type string Required. png or svg
country string Required. country code or name





Test online

https://sispos-dashboard.herokuapp.com



Run Locally

  git clone https://github.com/RedaBoi12/sispos.git
  1. Go to the project directory
  cd sispos
  1. Install dependencies
  npm install
  1. Start the server
  ng serve





Roadmap

  • Additional browser support

  • Additional code optimisation



Support

For support, email [email protected].





FAQ

How long did this project take?

Answer : Less than a month.

Do you plan on updating it in the future?

Answer : Not really, this project is mainly for me to learn angular.





🚀 About Me

Hello, my name is ElGoumri Reda, and I am the creator of this repository "SISPOS", which is my second angular project and is primarily intended to help me learn and understand the framework as much as possible .

🛠 Skills

HTML, CSS, jQuery, Javascript, Typescript
Frameworks: Bootstrap, Angular





Lessons Learned

What did you learn while building this project? What challenges did you face and how did you overcome them?

Long before this project, I had very little knowledge of front end development. or web development in general, but working on this project, getting errors and spending so much time looking for fixes is really how a person learn something.

The most difficult challenge for me in this project was learning how to fully manipulate an API using http requests and the HttpClient module offered by Angular, whether in retrieving all the information via a GET request, loading the return into an observable, by transforming it into an array to move it from one page to another and display the information correct to the user.

I also learned how to make a full P.E.N REST Api from scratch, and linked it to my project. Which is really cool!