Git Product home page Git Product logo

cs3122-application's Introduction

StoryBook

Version License

Overview

Storybook is a social media web application built as a group project for CS3122 - Advanced Database Management Systems. This project demonstrates the application of database concepts and technologies in a real-world context.

Features

Users can:

  • Register and create profiles
  • Share posts with text and optional images
  • Comment on other users' posts
  • Like posts

API Documentation

The Postman API playground is available at Postman. API docs are available at /docs.

Installation

To install and run StoryBook, follow these steps:

  1. Clone the repository: git clone https://github.com/dilshankarunarathne/storybook.git
  2. Navigate to the project directory: cd storybook
  3. Install dependencies: cd server && npm install && cd ../client && npm install && cd ..
  4. Start the server: cd server && npm start
  5. Start the client: cd client && npm start

Project Structure

storybook-master
│   .gitignore
│   docker-compose.yml
│   LICENSE
│   README.md
│   swagger.json
│
├───.github
│       FUNDING.yml
│
├───client
│   │   .gitignore
│   │   .gitkeep
│   │   Dockerfile
│   │   package-lock.json
│   │   package.json
│   │   README.md
│   │
│   ├───public
│   │   │   index.html
│   │   │   style.css
│   │   │
│   │   └───assets
│   │           avatar_default.jpg
│   │           cover1.jpg
│   │           cover2.jpg
│   │           email-veri1.jpg
│   │           like.png
│   │           like1.jpg
│   │
│   └───src
│       │   App.css
│       │   App.js
│       │   App.test.js
│       │   index.css
│       │   index.js
│       │   logo.svg
│       │   reportWebVitals.js
│       │   setupTests.js
│       │
│       ├───api
│       │       comments.js
│       │       post.js
│       │       profile.js
│       │       reaction.js
│       │       users.js
│       │
│       ├───Components
│       │   ├───edit_profile
│       │   │       editProfile.css
│       │   │       EditProfile.jsx
│       │   │
│       │   ├───feed
│       │   │       feed.css
│       │   │       Feed.jsx
│       │   │
│       │   ├───landingPage
│       │   │       landingPage.css
│       │   │       LandingPage.jsx
│       │   │
│       │   ├───login
│       │   │       login.css
│       │   │       Login.jsx
│       │   │
│       │   ├───post
│       │   │       post.css
│       │   │       Post.jsx
│       │   │
│       │   ├───profile
│       │   │       profile.css
│       │   │       Profile.jsx
│       │   │
│       │   ├───register
│       │   │       register.css
│       │   │       Register.jsx
│       │   │
│       │   ├───share
│       │   │       share.css
│       │   │       Share.jsx
│       │   │
│       │   └───topbar
│       │           topbar.css
│       │           Topbar.jsx
│       │
│       ├───context
│       │       AuthContext.js
│       │       AuthProvider.js
│       │       PrivateRoute.js
│       │
│       └───pages
│           ├───forgot
│           │       forgot.css
│           │       Forgot.jsx
│           │
│           ├───home
│           │       home.css
│           │       Home.jsx
│           │
│           ├───reset
│           │       reset.css
│           │       Reset.jsx
│           │
│           └───success
│                   success.css
│                   Success.jsx
│
├───database
│       .gitkeep
│       database.sql
│       triggers.sql
│
├───docs
│       .gitkeep
│       index.html
│
└───server
│   .gitignore
│   app.js
│   db.js
│   Dockerfile
│   package-lock.json
│   package.json
│   process.env
│   README.md
│
├───controllers
│   │   authController.js
│   │   commentController.js
│   │   homeController.js
│   │   profileController.js
│   │   reactController.js
│   │
│   └───uploads
│           .gitkeep
│
├───middleware
│       authMiddleware.js
│       mailer.js
│
├───models
│       Comment.js
│       Post.js
│       React.js
│       User.js
│
└───static
    .gitkeep
    account-verification-mail.html
    forgot-password-mail.html

Contributions

We welcome contributions to this project. Please check the contribution guidelines for more information.

The group members are:

  • EUSL/TC/IS/2019/COM/24   Dilshan
    • Server Application
    • Database
    • Client-Server Integration
  • EUSL/TC/IS/2019/COM/109 Tharuka
    • Client Application
  • EUSL/TC/IS/2019/COM/69   Isuru
    • Client Application
  • EUSL/TC/IS/2019/COM/49   Udari
    • Client Application
  • EUSL/TC/IS/2019/COM/35   Madhawa
    • Documentation
  • EUSL/TC/IS/2019/COM/11   Abiram
    • Client Application
  • EUSL/TC/IS/2019/COM/23   Sakaniya
    • Client Application

License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
CC BY-NC-SA 4.0
CC BY-NC-SA 4.0

cs3122-application's People

Contributors

dilshankarunarathne avatar udariadhikaram avatar isurudayananda avatar nadeetharuka avatar

Stargazers

 avatar  avatar

Watchers

 avatar

cs3122-application's Issues

Create an API documentation

Need to document our project. As a part of that, we need to start off by documenting the API.
I suggest to use a standard technology like OpenAPI or Swagger.

Post component

Create a Post component (React.js) in the client application.

It should have the following functionalities.

  • On top bar - left: there should be the avatar of the user's profile picture, followed by the user's name
  • On top bar - rigt: there should be the more icon (tripple-dot) for options
  • In the middle, there should be the photo of the post. Note that there can be posts without a photo, so this part can be null in some cases.
  • On the bottom, there should be two buttons for likes and comments
  • Like and comment buttons should have a number value on them that displays the current like count / comment count of the post

If you have any questions, please use discussions.
Happy coding ❤️

'Edit profile' page

Need a page in the client application for editing a user profile.
It should have input fields for the following:

  • Profile picture
  • First name, Last name
  • Profile Bio
  • Date of birth

If any of the above mentioned fields are not visible in the Profile component, please make them available there too.

Authentication handling in the client

The client application should support the authentication mechanisms provided by the server. It uses OAuth 2.0 bearer token system for authentication and authorization.

  • The client should store the token info locally and securely upon login
  • At each API call, the authorization header should be included

Filter response data

The response data of most endpoints are not filered. They just return everything in the table. This is a vulnerability of our platform and need immediate attention.

eg: get profile returns password hashes

Password reset form in the frontend

Create a page for resetting the user's password in the client application.

  • It should have input fields for password and confirm password
  • Should send a get request to {baseurl}/auth/forgot?code={verification-code} with the new password as body form-data
  • The verification code comes to the page as a query parameter

Make other entities depend on user

Need to make post, react, comment entities depend on the user entity. If a user is deleted, all his comments, reactions and posts should be deleted too.

Create 'edit post' page

Posts of users should be editable, so we need to provide the users with the ability to edit their posts

Integration

We need to integrate the client and the server applications.
The API documentation is available at Postman.

Email verification system

When a new user is registered, we need to send him a verification email. The user can click on the link in the email to verify his account. Non-verified accounts are not allowed to login.
A code is used for the verification purpose.

  • An email should be designed with HTML, with a link in the page.
  • That link should contain {baseurl}/auth/confirm?code={code}

This process will verify the user account.

  • Use nodemailer for email sending.
  • Can use Gmail service with app passwords in the environment.

Create triggers in the DB

As per the requirement, we need to use MySQL triggers in our application.
And, I have designed the server application that would just fit that.
We can use triggers to

  • handle the post cont for users
  • handle the comment and react count for a post

Please get on with this.
Make sure to handle the decrement as well as the increment.

Landing pages

Need to create a landing page after successful signup. The user still is not able to login, since the account is not verified, so need to tell the user to verify his/her account.
Need to create a landing page for that.

We also need to create a landing page after user's request to reset password.
The user can click on 'forgot password' in login page. After that, we need a page for the user to be directed. It should say something like 'please check your emails for a password reset link'.

Error prompts in the client

Create a way to show error messages to the user in the client application. For example, when an API reqeust fails, or credentials are invalid, at the moment, we do nothing. A descriptive error message should be prompted.

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.