Giter Club home page Giter Club logo

blog-js's Introduction

blog-js

IMPORTANT: This is a working progress and subject to major changes until the specified deadline below.

A school project to create a blog web app using JavaScript with a fully functioning MySQL database.

As this project is to be done by a group of 2, my partner for the next two weeks is Hajar Aslan.

So, we've decided to name our blog 🥁... "peace-n-love" (✌🏾❤️), and created a MySQL Database named db_peace-n-love.

Fed up with static .php files 😤😡, we'll be trying – as a personal challenge – to turn it into a bit of a progressive web app without* third-party libraries like redux, pwa-helpers or lit

Why peace-n-love you might ask? #GoodQuestion😜 !-: With everything that's going on in the world today, especially the recent intense fighting in Ukraine 🇺🇦, we've never needed some peace ✌🏾,and love❤️, moooore. Therefore, our blog will serve as an outlet for peaceful and loving articles that can hopefully change the world for the better. 🤞🏽🙏

The following tables (including a couple of TRIGGERS) were created in our db_peace-n-love database:

  • users: All currently registered users.
  • groups: All supported user groups (i.e. admin, publisher, moderator, staff, ...)
  • avatars: All avatars of registered users.
  • images: All images used by this blog.
  • articles: All articles created by publishers or administrators.
  • articles_trending: All trending articles.
  • articles_likes: All users who liked an article.
  • categories: All categories of corresponding articles.
  • tags: All tags created by registered users for published articles.
  • saves: All articles saved by registered users.
  • comments: All comments made by registered users.
  • comments_likes: All users who liked a comment.
  • streaks: All daily streaks of registered users. "You miss a day, you break the streak #LOL"
  • priv (Global Privileges) : All privileges currently supported by our peace-n-love blog (e.g. CREATE ACCOUNT, READ ACCOUNT, UPDATE ACCOUNT, DELETE ACCOUNT, CREATE USER, CREATE GROUPS, CREATE ARTICLES, CREATE COMMENTS, etc).

NOTE: For more info, read the Database section of this README.

*: markdown-it and mocha npm libraries could be used for markdown parsing and testing respectively.

Description

Original text in French: Vous décidez de créer un blog afin de publier des articles personnels et d’échanger avec vos visiteurs. Vous êtes complètement libre sur le choix du thème du blog. Alors amusez-vous, rendez le intéressant à utiliser et travaillez l’esthétique de celui-ci pour avoir le rendu le plus professionnel possible.

You decide to create a blog in order to publish personal articles and exchange with your visitors. You are completely free to choose the theme of the blog. So have fun, make it interesting to use and work on the aesthetics of it to have the most professional look possible.

Requirements

These are a couple of the main requirements for this school project:

  1. A home page: It contains the latest articles put online and some call-to-actions.

  2. A page allowing users to authenticate. On this page you must bring up a login and registration form at the click of a button. Registration must be done with an asynchronous request and form checks must be done front and back.

  3. Once registered and logged in, you are redirected to a page displaying profile information. The user must be able to modify his information without reloading the page.

  4. A page that presents the different articles of the blog. The page presents a limited number of articles (between 5 and 20) with pagination to see the other articles. This pagination must be done with a GET parameter in the request (example: ?page=1).

  5. A page that allows you to create articles: The page is only accessible to people who have the roles to write an article (moderators and administrators). Each article is linked to a category.

  6. A page that displays the content of an article and the corresponding comments: The retrieval of the article is managed via a parameter in the GET request (ex:?article=1). This page is therefore a template filled with the information of the corresponding article each time.

  7. An admin page: This admin panel allows administrators of your site to manage all users, articles, comments, categories, rights, etc.

NOTE:

Target Skills

  • Database architecture: MCD / MLD / MPD
  • Backend architecture in class
  • Responsive interface
  • Javascript asynchronous programming
  • Use of URL parameters

Jobs

MOTTO: We'll always do more 😜

The official deadline of the jobs below - according to intra - is 20-03-2023 at 11:10 A.M. Here is a list of all the specific files to be submitted as well as their corresponding / current status for this project:

No. Name File Status
1 Default / Index - Page index.php Done*
2 Peace & Love - Database - SQL db_peace-n-love.sql Pending

NOTE: (*) = still needs to be updated

Structure

The folder & file structure of this project:

  • api
      • Database.php
      • ResponseHandler.php
      • ...
      • User.php
      • auth.php
      • ...
      • Article.php
      • ...
      • Comment.php
      • ...
  • assets
    • ...
      • fade-in-animation.css
      • pop-in-animation.css
      • slide-from-down-animation.css
      • color.css
      • typography.css
      • styles.css
      • home-styles.css
      • splash-screen-styles.css
      • login-styles.css
      • register-styles.css
      • profile-styles.css
  • src
    • App.js
    • Screen.js
    • Page.js
    • View.js
    • ...
      • starter.js
      • resizer.js
      • router.js
      • splash-screen.js
      • welcome-screen.js
      • ...
      • home-page.js
      • login-page.js
      • register-page.js
      • ...
      • ...
        • default-home-view.js
        • login-home-view.js
        • register-home-view.js
        • default-articles-view.js
        • reader-articles-view.js
        • creator-articles-view.js
        • default-profile-view.js
        • editor-profile-view.js
    • ...
  • LICENSE
  • README.md
  • manifest.json
  • package.json
  • ...
  • index.php
  • db_peace-n-love.sql

NOTE: This is just a looong snippet ;)

More

These are some of the things we did or plan to do, in addition to this project's job requirements:

No. Name File Status
1 Register - Page register-page.js Pending
2 Login - Page login-page.js Pending
3 Profile - Page profile-page.js Pending
4 Admin - Page admin-page.js Pending
5 Splash - Screen splash-screen.js Done*
6 Logout - Page logout-page.js Pending
7 Database - API Database.php Pending
8 User - API User.php Pending
9 ResponseHandler - API ResponseHandler.php Pending
10 Articles - API Articles.php Pending
11 Pop In - Animation pop-in-animation.css Done
12 Fade In - Animation fade-in-animation.css Done
13 Slide From Down - Animation slide-from-down-animation.css Done
14 Language Update - API lang_update.php Pending
15 Theme Update - API theme_update.php Pending
16 Internationalization - API Internationalization.php Pending
17 Settings - Page settings-page.js Pending
18 Welcome - Screen welcome-screen.js Done*
19 Goodbye - Page goodbye-page.js Pending
20 Slide From Up - Animation slide-from-up-animation.css Donee
21 Welcome - Stylesheet welcome-screen-styles.css Done*
22 Home - Stylesheet home-styles.css Pending
23 App - Class App.js Done*
24 Screen - Class Screen.js Done*
25 Page - Class Page.js Done*
26 View - Class View.js Done*
27 Starter - Helper starter.js Pending
28 Router - Helper router.js Done*
29 Default Home - View default-home-view.js In progress
30 Default Login - View default-login-view.js Pending
31 Default Register - View default-register-view.js Pending
32 Engine - Class Engine.js Done*
33 Loader - Mixin loader-mixin.js Done*
34 Service - Mixin service-mixin.js Done*
35 Event - Mixin event-mixin.js Done*
36 LiveStorage - Helper LiveStorage.js Done*
37 Slide Left - Animation slide-left-animation.css Done
38 Slide From Left - Animation slide-from-left-animation.css Done
39 Slide Right - Animation slide-right-animation.css Done
40 Slide From Right - Animation slide-from-right-animation.css Done

NOTE: (*) = still needs to be updated.
There's certainly a couple of file we must've forgot or not added yet, so we'll keep the above list updated obv. :)

Database

HEADS-UP: We do love me some TRIGGERS, so do not be shocked to see a couple in this database #LOL

The following tables were created in a MySQL database named db_peace-n-love via PDO on phpmyadmin:

NOTE: ⨁ = FOREIGN_KEY

users - MySQL Table

This table has a one-to-many relationship with articles, avatars tables.

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 username VARCHAR 30 No None -
3 email VARCHAR 60 No None -
4 password VARCHAR 255 No None -
5 firstname VARCHAR 30 No None -
6 lastname VARCHAR 30 No None -
7 group_id ⨁ TINYINT 10 Yes NULL -
8 avatar_id ⨁ INT 255 Yes NULL -
9 bio TINYTEXT 255 Yes NULL -
10 created_at DATETIME - Yes NULL -

NOTE:

groups - MySQL Table

No. Name Type Length Null Default Extra
1 id 🔑 TINYINT 10 No None AUTO_INCREMENT
2 name VARCHAR 30 No None -
3 rights VARCHAR 255 No None -

avatars - MySQL Table

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 label VARCHAR 30 Yes NULL -
3 placeholder BOOLEAN 1 Yes 0 -
4 image_id ⨁ INT 255 No None -

images - MySQL Table

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 width TINYINT 5 No None -
3 height TINYINT 5 No None -
4 type VARCHAR 10 No None -
5 blob MEDIUMBLOB 2000000 No None -

articles - MySQL Table

This table has a many-to-one relationship with users table.

No. Name Type Length Null Default Extra
1 id 🔑 VARCHAR 30 No None -
2 category_id ⨁ TINYINT 10 No None -
3 author_id ⨁ INT 255 No None -
4 cover_image_id ⨁ INT 255 No None -
5 title VARCHAR 60 No None -
6 text TEXT 2000 No None -
7 likes INT 10 Yes NULL -
8 published_at DATETIME - Yes NULL -
9 edited_at DATETIME - Yes NULL -

NOTE:

articles_trending - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 article_id ⨁ VARCHAR 30 No None -
3 author_id ⨁ INT 255 No None -
4 start DATETIME - Yes NULL -
5 end DATETIME - Yes NULL -

NOTE:

articles_likes - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 article_id ⨁ VARCHAR 30 No None -
3 user_id ⨁ INT 255 No None -
4 liked_at DATETIME - Yes NULL -

NOTE:

categories - MySQL Table

⚠️ WARNING: This table may be used by one or more TRIGGERs from the articles table.

No. Name Type Length Null Default Extra
1 id 🔑 TINYINT 10 No None AUTO_INCREMENT
2 name ⨁ INT 255 No None -
3 image_id ⨁ INT 255 Yes NULL -

NOTE:

tags - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 name ⨁ INT 255 No None -
3 article_id ⨁ VARCHAR 30 No None -

NOTE:

saves - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 user_id ⨁ INT 255 No None -
3 article_id ⨁ VARCHAR 30 No None -
4 saved_at DATETIME - Yes NULL -

NOTE:

comments - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 user_id ⨁ INT 255 No None -
3 text TEXT 500 No None -
4 article_id ⨁ VARCHAR 30 No None -
5 created_at DATETIME - Yes NULL -
6 edited_at DATETIME - Yes NULL -

NOTE:

comments_likes - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 comment_id ⨁ INT 255 No None -
3 user_id ⨁ INT 255 No None -
4 liked_at DATETIME - Yes NULL -

NOTE:

streaks - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 user_id ⨁ INT 255 No None -
2 days INT 255 No None -
3 weeks INT 255 No None -
4 months INT 255 No None -
5 start DATETIME - Yes NULL -
6 end DATETIME - Yes NULL -

NOTE:

priv - MySQL Table

⚠️ WARNING: This table may contain one or more TRIGGERs

No. Name Type Length Null Default Extra
1 id 🔑 INT 255 No None AUTO_INCREMENT
2 name VARCHAR 30 No None -
3 level TINYINT 3 No 0 -

NOTE:

Installation

IMPORTANT: Make sure you have XAMPP already installed on your computer before proceeding.

  1. Clone this project's repository
git clone https://github.com/abraham-ukachi/blog-js.git

NOTE: There's no need to change the current working directory to blog-js

  1. Now, create a symbolic link of blog-js in the XAMPP's htdocs folder:
  • On Mac
ln -s "$(pwd)/blog-js" /Applications/XAMPP/htdocs/blog-js
  • On Linux
ln -s "$(pwd)/blog-js" /opt/lampp/htdocs/blog-js
  1. Open the blog-js folder in your default browser:
open http://localhost/blog-js

Testing

Browser Version Status Date Time
Brave 1.47.186 Tested 14-03-2023 23:43:03
Chrome - Pending - -
Firefox - Pending - -
Safari - Pending - -
Opera - Pending - -
Edge - Pending - -
IE - Pending - -

NOTE: IE = Internet Explorer = 👎🏽

TODOs

  • ? Rename priv table to global_privileges
  • Add a login with Google Button on the Login - Page
  • Implement Service Workers to provide offline functionality
  • ? Rename this project from blog-js to peace-n-love
  • Add a log out button in the narrow layout of Settings - Page
  • Show a toast after a preference change or settings update.
  • Apply the slide-from-up animation to dialogs.
  • Change the default input text & background color for Brave's autocomplete
  • Create a project-specific logo
  • Add localization / internationalization (at least: english & french)
  • Add mobile compatibility to all pages (i.e. make it responsive)
  • Optimize .svg doodles
  • Optimize all .php files
  • Optimize all .css files
  • Optimize all .js files
  • Remove unnecessary comments
  • Add screenshots

Some Random Screenshots

On Mobile

Classic Mode Light Mode Dark Mode
N/A N/A N/A

On Laptop

Classic Mode Light Mode Dark Mode
N/A N/A N/Adsd

blog-js's People

Contributors

abraham-ukachi avatar imgbotapp avatar

Watchers

Kostas Georgiou avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.