Gatopedia

Gatopedia is a Wikipedia-like site dedicated to cats. It was created to showcase web development skills. Gatopedia allows users to create an account and to add/edit articles of their choice. Authentication is based on JWT technology.

Page overview with screenshots

Index page view

Authorization options overview

Gatopedia allows users to create accounts on the page. Sign-up form looks like this:

Sign-up page provides users with email and nickname verification. It also ensures that chosen password is strong. In case of failing those requirements, the users are notified via error box below form. If all credentials are correct (and unique in case of email and nickname), the page sends user a verification link to a given address. Verification link was generated using JWT technology. The account is created only if the user manages to click verification link in 10 minutes from submitting the form. Then the user can log in. Log-in form looks like this:

Users can log in using this form. If they forgot they password, they always can choose "Forgot Password?" option:

After submitting a correct email addres, user will receive an email with a verification link, which enables them to change their password. This verification link also uses JWT.

Assuming everything went smoothly with logging in, an user will be presented with their user profile page:

Logged in users can edit their account information:

Creating and Editing articles

They also can add new articles and edit existing ones:

Gatopedia's editor is based on open-source tool Editor.js. The site also uses this tool to load articles. This is how articles are displayed:

Users can also search for articles. Searching is only executed in article titles. It uses built-in search options that are available on mongoose npm module.

Side menu options

About page:

Users page:

Most popular page:

Used technologies

Back-end:

• MongoDB
• TypeScript
• Node.js (with npm modules listed below)
  • bcrypt
  • cookie-parser
  • ejs
  • express
  • jsonwebtoken
  • mongoose
  • multer
  • nodemailer
  • nodemon
  • validator

Front-end:

• Editor.js tool
• HTML / CSS
• JavaScript

Setting up Gatopedia

Before setting up Gatopedia locally, you will have to have prepared:

1. MongoDB database with connect URI string ready (how to do this here)
2. Email address from which verification emails will be send (on Gmail you will have to allow access to the mailbox for third-party applications - how to do that here - save the generated code for later)
3. Node.js and TypeScript installed

With all that ready, you can start setting up Gatopedia locally on your computer. Download source code and open /src/globalVariables.ts file. Find those lines at the end of the file:

// given URI allows connecting to a mongoDB database
module.exports.dbURI = ""

// email address that verifivation emails will be sent from
// works with gmail addresses, in case of different site you may
// need to adjust the code in ./controllers/authController.ts
module.exports.hostEmailAddress = ""

// password to that email account
module.exports.hostEmailPassword = ""

Fill empty quotation marks with your database connect link, chosen email address and its password (the code that Gmail generated). Afterwards, open a terminal in project directory and run command:

npm install

It will install all dependencies needed to launch Gatopedia. It may take some time. When its done, type:

tsc

Which will compile all TypeScript into Javascript. Then run command:

nodemon build/app

Which will run the server. If everything went smoothly, Gatopedia should work on your computer. Open your browser and type into URL bar:

localhost:3000

or simply click this link. Now your Gatopedia is up and running. Have fun!