Git Product home page Git Product logo

class22-project's Introduction

DevConnector 2.0

Social network for developers

This is a MERN stack application from the "MERN Stack Front To Back" course on Udemy. It is a small social network app that includes authentication, profiles and forum posts.

Quick Start

# change default.json file in config folder

# this file is located in config/default.json

# add uri of your mongodb connection for example

 "mongoURI": "mongodb://localhost/dev-social",
 
# Install server dependencies
npm install

# Install client dependencies
cd client
npm install

# Run both Express & React from root
npm run dev

# Build for production
cd client
npm run build

App Info

Author

Brad Traversy Traversy Media

Version

2.0.0

License

This project is licensed under the MIT License

class22-project's People

Contributors

dependabot[bot] avatar noergitkat avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

class22-project's Issues

Friend Requests

User story:
As a user I want to make friend requests and accept or reject friend requests from other users. And I should be able to delete a friend from my friends list.

Technical:
backend:

  1. Modify models/User => add three arrays of objects.(done)
  2. Add "sendFriendRequest" , "cancelFriendRequest" and "acceptFriendRequest" endpoints.(api/profile)(done)

front end:

  1. A separate component called "friends" includes: friends list, requests list and waiting list.
  2. Set "confirm", "reject" and "cancel" buttons in Friends component.
  3. Set "sendFriendRequest" button in developers page.
  4. set Alerts.

Email confirmation & Forgot Password

1. Email Confirmation

User Story
As a user I want to ensure that I registered in the site with my correct email. So if the site wil send me an email then I can find it in my inbox mail. Imagine that I paid for something in the site and then the payment details sent to false mail adres. That is not useful.
As an admin user I want new users to confirm their emails so that I can be sure they are using real email accounts.

  1. User should receive an email confirmation acknowledging that they submitted their email address
  2. The confirmation email includes a Welcome statement and a link which has a specific expiry date to confirm their email
  3. By clicking the link user should redirected to their newly created dashboard

Plan for technical implementation
Frontend

  • Create Confirm component
  • Create action, action creator for confirm mail and make changes to related reducer
  • Change Register component

Backend

  • Change User model for creating new users with unconfirmed property
  • Change route middleware for registering new user, add mail sending with JWT token
  • Add new route for confirming email which also returns token for authentication

2. Password Forgot and Reset

User Story
As a user, I want the ability to reset my password that I forget when I am asked for it so that I can access my account again

  1. When being asked for the password, there is a link by which users can start a reset password action by entering email.
  2. The password reset email will contain a link to access a page where the users can reset their password.
  3. After a password reset the user should be redirected to login page to enter website using their newly created password.

Plan for technical implementation

Frontend

  • Add forgot link to Login component.
  • Create public password reset component which takes email input
  • Create public password reset component which takes new password twice

Backend

  • Create 2 routes/endpoints: first one to send link to the user mail with token, second one to update the password and in the data base.

Live Search

User Story:
As a user, I want to be able to search for other users directly from the developers page. When typing in the search field, I want to see a list of users whose names match with the letters that I type in the field. And when I click on a developer view profile button, it has to take me to the user's profile. And when the developers page gets bigger, I want to have separate pages: each page displaying 5 developers profiles, or the number could be increased in the future.

Implementing customer needs:
-Front-end:

  1. HTML:
    ⦁ Search field: input elements of type search.

    ⦁ Pagination: ul unordered list of items.

  2. CSS:
    ⦁Styling input element using CSS attribute and class selectors.

    ⦁Taking into the consideration the concept of mobile-first approach.

  3. JavaScript:

    Search field:
    a. Array filter method: To create a new array with all elements that pass the test implemented by the provided function.

    b. toLowerCase method: JavaScript is a case sensitive programing language, an inequality between two letters can occurre in case one of them is lower case, or upper case.

    c. includes method: Is a case sensitive, determines whether a userName contains the given characters (searchText) within it or not, returns true or false.

    Pagination:
    a. Passing the total number of profiles (totalProfiles) to a Pagination component, as well as page size (profilesPerPage), to calculate the number of pages and reder them.

    b. Passing (handlePageChange) method: to rise an event (onPageChange) whenever a user clicks on a new page, the method receives a new page number.

    c. To map each page number to a list item, we created pageNumbers array based on dividing the totalProfiles by profilesPerPage. Assuming that we have 10 profiles and we want to display 5 profiles for each page, we will get 2 page numbers.

    d. Using Math.ceil method to avoid having floating point number as a result of division we used.

    e.handlePageChange sets the current page number.

    f. To display developers on each page using slice currentProfiles depending on indexOfLastProfile and indexOfFirstProfile.

Back-end:
-Getting Profiles from /api/profile route, uising axios.get('/api/profile') method.

Social media login

User Story
As a social media user, I want to directly login to your website with my social media account, so that I don't have to fill in the register form and create a new account.

Plan for technical implementation

  • Get a new firebase account and create app.
  • To use firebase, configure each provider we want to use in their own developer app settings.
  • In our Firebase app, enable facebook login by getting the App ID and an App Secret and enable Google login.

Frontend

  • Install Firebase library to use the Firebase Authentication SDK.
  • Create firebaseConfig file in client and initialize firebase app.
  • Create actions for register success for social user and loaded social user .
  • Create a new action creator to handle login/register from a social media account.

Backend

  • Add a new route for social media login/register in routes/api/users.

Live Chat(Mustafa/Mehmet/Salih)

User Story

As a user I want to chat other developers instantly. So, I can ask technical issues directly, and solve my problems not spending time trying to find solutions with only gooogling.I want to see which users are online. There will be a general room for all registered users so anyone can join this room. Later, it will be great idea to add private rooms to this feature.

Plan for technical implementation

Backend

  • Install socket.io library as a real time application engine.
  • Add new route for chat feature.
  • Make socket.io server and initialise it with express.
  • Make socket connection and broadcast.
  • For user list; add, remove and get online users.

Frontend

  • Install socket.io-client library as a real time application engine.
  • Create chat component.
  • Add link to Navbar component.
  • Render a Chat App as a private route on /chats
  • Create chat action creators and add into type file.
  • Create chat reducers and add a root reducer file.

Google Analytics

User Story :
As a developer, I want to use a free service like Google Analytics to collect some important data about, y website, like how many visitors come to the website, and how long they stay in it, which countries they came from, which pages they prefer and visit more, and other info.

Plan for technical implementation
Backend: only the frontend part is applicable.
Frontend : install React-ga npm , and add the required code

  • make an account in google analytics and get the unique id which i need to add in app.js

Example issue

User story
Template: As a < type of user >, I want < some goal > so that < some reason >.
User story: As a social media user, I want to directly talk to my international friends so that I can stay in touch with them.

Plan for technical implementation
Frontend

  • Create state for direct messages

  • Make components for chat service

  • ..
    .
    Backend

  • Make model for chat messages

  • Store log of every conversation in any given user's account

  • ...

(Don't forget to tag your team members + select the correct Project in this issue!)

News Feed

User Story :

As a user, I would like to see a link in the navbar lead to a page containing the last posts in the app, and when I click on one of the posts it will lead me -if I am authenticated - to post discussion page.
and if the user is not authenticated it will redirect him to the register, or login page

Plan for technical implementation

** Backend:**
make a new API route with the endpoint ('API/newsfeed') and fetch the posts from the database to the frontend.

** Frontend:**
make a new component ( newsfeed) and fetch the posts from the backend, and show it in UI.

Notification(Arya&Mustafa&Niyas)

User Story

As a user I want to follow changes instantly on the posts. I want to be notified when any of other users like or comment my posts. So, I can be always up to date, and react others as soon as possible.

Plan for technical implementation

Backend

Frontend

Progressive Web App

User Story :
As a developer, I would like to get the ability to add the web app as a mobile native app on user mobile screen , and make it faster when I open it from my phone app . and make it work offline (so it will request what is in the cache when there is no connection )

Plan for technical implementation:

backend:
NA

front end

  • make manifest JSON file
  • make server worker javascript file.
  • add static files to the cache

Friend Requests

User story:
As a user I want to make friend requests and accept or reject friend requests from other users. And I should be able to delete a friend from my friends list.

Technical:
backend:

front end:

  1. A separate component called "friends" includes: friends list, requests list and other developers' list to send request.
  2. make a button in friends component to send , confirm , reject and delete friend request.

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.