Web Organizer

MEN stack web application designed to help you organize your day-to-day routine. Create your own notes, set their priority and control them via status property.

Table of contents

Description
Technologies
Public tests environment
File structure
Current features
Installation
Showcase
TODO
Licence

Description

Web Organizer allows you to add and modify notes with a simple title-body structure. You can use HTML tags directly in your note's body in order to better organize their structure and display.

Technologies

• NodeJS
  
• ExpressJS
  
• Bootstrap
• Embedded JavaScript templating
  
• Mongoose
  
• Nodemailer
  
  

Public tests environment

You can check out the application under following link:

https://web-organizer.org.pl/

File structure

• /: root directory containing server/app configuration files and environmental variables
  
• /src: root directory for views, partials, routes, etc.
  
• /src/locales: JSON language packs (WIP)
  
• /src/config: sets of rules used by the authentication module
  
• /src/routes: contains all of the backend routing within the app, including user request handlers
  
• /src/models: contains basic DB schemas used by the application
  
• /src/views: stores all .ejs view files and templates served as a frontend
  
• /src/views/partials: stores .ejs 'sub-views', loaded either in layout.ejs or appropriate view file in /src/views
  
• /src/views/partials/modals: contains custom modals which are displayed after performing certain actions
  
  

Current features

• Perform basic CRUD operations within your dashboard
  
• Supports HTML tags embedded directly in note's body. Items such as links, images, headers or lists will be correctly interpreted by the browser, which allows you to customize them even better
  
• Each note is highlighted based on its status - Blue for 'To do', Orange for 'In progress' and Green for 'Done'
  
• Contact form's mailing is handled by Nodemailer library.
  
  

Installation

First of all, run the following command:
git clone https://github.com/jsarnowski96/WebOrganizer.git

After cloning the repository, open command prompt in project's directory and install dependencies:
npm install

In order to test the application locally, you have to create .env file first in the root directory of the project (/).
Next, add the following lines to the file:

PORT = <nodejs_server_port>
DB_USERNAME = <username>
DB_PASSWORD = <password>
DB_NAME = <database_name>
DB_URL = <atlas_cluster_url>
MAIL_USER = <contact_mail>
MAIL_PASS = <contact_mail_pass>
MAIL_HOST = <mail_server_addr>
MAIL_PORT = <mail_server_port>

Replace all placeholders with your own config.

To launch the application locally, make sure you're in the root directory and then execute the following command:
nodemon .\server.js

Or, if you use pm2 NodeJS process manager, you can simply run pm2 server.js directly in root directory for convenience and simplified management.

Tip: You don't have to manually create collections in the target database - they will be added automatically along with the first items.

Showcase

Home screen:

Contact form:

Registration page:

Login page:

Dashboard:

Note edit view:

Registration process & adding first notes:

Editing note & adding custom HTML tags:

Adding long text in note with Read more button:

Editing profile and contact form behavior:

Web Organizer is also fully responsive - it perfectly fits both standard PC screens and mobile devices:

TODO

• frontend polishing
  
• About page
  
• Contact form handler
  
• Expanding dashboard features (sorting/ordering, note priority, deadline, etc.)
  
• SSL Encryption
  
  

Licence

Web Organizer is being distributed under GPL-3.0 licence.
https://www.gnu.org/licenses/gpl-3.0.html