Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/faylina/mysticode

Second project utilizing JavaScript, server and database to create a grimoire app.
https://github.com/faylina/mysticode

Last synced: 2 months ago
JSON representation

Second project utilizing JavaScript, server and database to create a grimoire app.

Awesome Lists containing this project

README 

        
# Mysticode



This is my object-oriented project utilizing JavaScript, server (node.js) and database (CouchDB) 

to create a grimoire app.



# ----- Vision for this website -----



Mysticode is a grimoire app for convenient writing and storing of spells with a handy search

and filter function. It is meant to emulate a real book as much as possible while creating

the necessary ambience for creative crafting of spells. 



# ----- Goals -----



This project aims to make use of JavaScript, a node server and a CouchDB database. It is 

meant to have a frontend for the user and an admin backend to add, view and delete spells.

Moreover, this project is fully responsive.  



# ----- Structure -----



FILE STRUCTURE



- The root directory contains, apart from the necessary files for node, the JS-scripts for the

classes and the server as well as the public directory.

- The public directory contains the scrips for the homepage and the backend page and the assets

directory.

- The assets directory houses directories for the CSS stylesheets of the pages, the images and the

JS-scripts for running the site.

- The images directory stores the images for the website itself as well as a folder for the 

uploaded images of the spells.



WEBSITE STRUCTURE



- The website consists of the frontend app for the user and the backend app for the admin.

- This project is object-oriented and uses the classes Spell and User.

- The Spell class contains information about a spell that is saved and displayed on the website.

- The User class contains information about the name and credentials of a user which are used

to log in. 

- The server script runs the server and controls the communication with the database. 

- The index script contains the HTML for the frontend app and the backend script contains the HTML

for the backend app.

- Each process on the website is housed in its own JS-script.



FLOW



----- Backend -----

- Here, the admin can create new spell entries by submitting a name for the spell and description, 

choosing an element and uploading an image. (Sanitization and validation are still missing.)

- Below the form is a list of already submitted spells to be viewed (including the image) and 

potentially deleted.

- Has a new spell been submitted, it will appear dynamically in the list and disappear the 

same way after being deleted.



----- Frontend -----

- Upon loading the site, the user sees the front cover of the closed grimoire with the logo on 

it. The book can be opened by clicking on it. 

- After the book is opened, the navigation menu is displayed on its inside cover on the left side 

and a greeting and introduction on the page on the right side. 

- By clicking on "Spells" in the navigation menu, a list of all spells is displayed on the right, 

showing each spell's image, name and element.

- The user can navigate to the full view of each spell by clicking on the desired spell. The name, 

element, description and image in full size will appear. 

- The list of spells can be searched by name by clicking "Search" in the navigation menu. A list of 

all spells will appear that match the search term. The user can then navigate to the full view of 

the spell by clicking on it. 

- The list of spells can also be filtered by element by clicking on "Filter" in the navigation menu. 

Now the user can choose the element to receive a list of all spells that are of the chosen element. 

The user can then navigate to the full view of the spell by clicking on it.

- The user can also add their own spell by clicking "Add Your Spell" in the navigation menu. If they 

are not logged in yet, they will now be asked to do so with their email and password.

- If the user doesn't have an account yet, they can create one by clicking "Create Account" below the 

login form. 

- The register form asks the user for their first and last name, their email address and to create a 

password for the account. All fields are mandatory. Alternatively, the user can return back to the 

login page, by clicking "Back To Login". 

- Once the user has registered, they are logged in automatically and redirected to the spell list. 

Their name appears below the navigation menu to signalize their logged-in status along with a logout 

button.

- Upon logging out the user will be redirected to the spell list.

- Upon loading the app again and opening the book, the user is also greeted by name in the introduction. 

- After registration the user can alternatively click "Login" in the navigation menu to log into their 

account. 

- In a logged-in state the user can now add their own spell to the grimoire by submitting a name for the 

spell and description, choosing an element and uploading an image. (Sanitization and validation are still 

missing.) The new spell can then be viewed normally. 

- At any time the grimoire can be closed by clicking "Close" in the navigation menu. The user can resume 

their work uninterrupted upon opening the book again. This shields its contents from prying eyes.