Git Product home page Git Product logo

react-express-graphql-project's Introduction

React-Express-GraphQL-Project

This repository contain 4 part, 2 React.js project, one express project and one apollo express project. This repository mainly foucs on develop a social media project and a admin project for manage the social media website. Run on Node v16.17.0 and using NPM 8.11.0 intall pageage.

Architecture diagram of porject

architecture diagram

Features:

  • Social media web application
    • Sign in
      User able to use email and password to log in Social media website. User also need to pass multifactor authentication.
    • Sign up
      User need to enter name,email and password to sign up Social media website. The name,email and password can be verify by front- end and back-end.
    • Profile
      User able to see the personal detail in the profile page. User also can modify their account detail.
    • Make a Post
      User can posting their information in the posting page, such as Image, text.
    • Reply a post & reply
      User able to reply a post or a reply.
    • Follow & Unfollow
      User able to follow a user or unfollow a user.
    • Post reactions
      User able to click "Like" button or "Dislike" button for post.User can share their preference for post.
  • Admin web application
    • Disable post
      administrator can disable a post if deemed inappropriate(Dirty word).
    • Block User and unblock user
      administrator blocking a user will not allow a user to login until the admin unblocks the account
    • Number of users using social media website per day
      The bar chart will show the number of user login social media website everyday.
    • User post reaction metrics
      The 2 bar chart will show the count of post preference for every user.
    • Profile visits
      The line chart will show the number of user's profile has been visit for each user.
    • Top 10 Follower metrics
      The bar chart will show the Top 10 Follower of blogger in the Metrics.

How and what to install

  • Install Node v16.17.0 , NPM 8.11.0 and MySQL are necessary.
  • Go into directory "./expressapp","./reactPage","./admin/adminServer","./admin/adminclient" and run command "npm install" in the terminal.
  • After finishing install package, run command "npm start" in directory "./admin/adminclient","./reactPage".
  • Run run command "node server.js" in directory "./admin/adminServer","./expressapp".

NPM package:

react-moment
react-toastify
uuid
react-bootstrap
moment
moment-timezone
firebase
bootstrap
@emailjs/browser
react-quill
axios
argon2
jest
mysql2
sequelize
@graphql-tools/schema
apollo-server-core
apollo-server-express
bad-words
graphql
graphql-type-uuid
chart.js
react-chartjs-2

react-express-graphql-project's People

Contributors

lucasliown avatar

Watchers

 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.