Skip to content

Latest commit

 

History

History
124 lines (103 loc) · 5.76 KB

README.md

File metadata and controls

124 lines (103 loc) · 5.76 KB
Raw

Event-calendar

Application with CRUD and without refreshing

HTML5 CSS3 JavaScript NodeJS Bootstrap5

For deploying:

  1. Download the project
  2. Install Node.js on your computer if you haven't already
  3. Run the command "npm install"
  4. Import database.sql into your local database
  5. Write your database settings into modules/config_db.js

About the project

The main business purpose was in creating a simply and understandable calendar, where administrators can add, change and delete events, and other users (clients) can view them.

Based on the purpose, I focused on the main business tasks: Simply surfing: Events will be paid. That's why clients must have all opportunities for finding events, that can be interesting for them. Otherwise, the company will lose money (because users will not pay for the events) Calendar have to be single paged. And all actions have to be without redirecting and refreshing page Easy administrating: Administrators are people without some particular knowledge about the system. That's why administrating process have to be safe and understandable Flexibility: Overwhelming majority of users will surf this page with the phone

Based on the tasks, I started the development

1.Simply surfing

Each event can be just in one type:

  • Meeting with an expert
  • Question-answer
  • Conference
  • Webinar

For a better selection was implemented a filter:


Each type of event have their particular color. And after pressing one of the filter buttons, the client can see just a particular type of events in calendar:


Pressed button will have border, that mean that filter is in active statement. Each day on the calendar, that has at least one of the event in the chosen type - has a dot in the particular color of the event.

2. Single paged calendar

Nowadays, users are very annoyed when they have to wait for some actions on the page, or when web-page makes a redirecting or flicking after that. That's why all requests to the server were developed by using global FETCH method for catching information from the servers without refreshing and redirecting. Server was created using Node.js - it's the better way for having fast and establish connection.

All requests to the server are going through the API page, and the answers from the server depend on the request method:

  • GET - getting event list
  • POST - adding new event
  • PUT - edit some particular event
  • DELETE - deleting some particular event

After successful action, server response status 200 and result of the request. After that, using global FETCH method, page refreshes event list, updates color of dots and shows the message about successfully action.


3. Easy administrating

I could have made a particular page for the administrators. But a better way will be making the possibility for creating, editing and deleting events using the same page as for users. If you are administrator - you can make CRUD actions with the events. If you are a client - then you have just filter buttons. All CRUD requests are based on a single-page rule (2), like for clients. Based on the understanding, that administrator can delete the event by mistake - I created confirmation of deleting. It appears near the deleting button. Ant if you really want to delete this event - you have to move your mouse a little to the right for confirmation your action:

Desktop

Mobile

4. Flexibility

Considering that users mostly use mobile phones, I decided to use the bootstrap framework. It helps to improve the user experience and save time for the development of other features of the application:

Desktop

Mobile

Desktop

Mobile