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.
# 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
Brad Traversy Traversy Media
2.0.0
This project is licensed under the MIT License
class22-project's People
class22-project's Issues
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
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
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:
- A separate component called "friends" includes: friends list, requests list and other developers' list to send request.
- make a button in friends component to send , confirm , reject and delete friend request.
Live Chat
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:
-
HTML:
⦁ Search field: input elements of type search.⦁ Pagination: ul unordered list of items.
-
CSS:
⦁Styling input element using CSS attribute and class selectors.⦁Taking into the consideration the concept of mobile-first approach.
-
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.
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:
- Modify models/User => add three arrays of objects.(done)
- Add "sendFriendRequest" , "cancelFriendRequest" and "acceptFriendRequest" endpoints.(api/profile)(done)
front end:
- A separate component called "friends" includes: friends list, requests list and waiting list.
- Set "confirm", "reject" and "cancel" buttons in Friends component.
- Set "sendFriendRequest" button in developers page.
- set Alerts.
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.
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.
- User should receive an email confirmation acknowledging that they submitted their email address
- The confirmation email includes a Welcome statement and a link which has a specific expiry date to confirm their email
- 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
- When being asked for the password, there is a link by which users can start a reset password action by entering email.
- The password reset email will contain a link to access a page where the users can reset their password.
- 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.
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!)
shayar
user story:
pal
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.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.