Social network using React JS and Firebase
Social Media culture is the center of the current human interaction since covid-19 set up in our cities and push us to stay at home. Sharing content with people is something that we can keep enjoying without being in the same place and with the boom of the Social Networks like Twitter, Facebook, Instagram, Snapchat and LinkedIn nowadays we easily can share anything, from anywhere to anybody. But, what about when we want to share only with selected people that will take care of the content? How can we restrict this interactions only to the people that is interested about and not only some of our friends?
Índice
1. Description
2. User Definition & User Stories (UX)
3. Aceptance Criteria
4. Technical Requirements
5. Hacker edition
6. Expected Learning Outcomes
For this project we have to build a SPA (Single Page Application) as a Social Network (CRUD) with all the capacity to receive any number of users and being scalable. The matter is free but have to be personalized for a specific batch of people and create a virtual comunity with them. For example a comunity that are wanting to keep a Journal activity, or a group of people interested in the same topic or goal like learn French. The world is open and available to you to build your first Social Network using ReactJS, Firebase Authentiation services, Firestore DB, and at least one component based library of your selection.
**Users: The batch of people **
The interface should allow the visitors:
-
Log-in
- With Google, Facebook, Twitter or GitHub (select the appropriate for the batch of users)
- Phone number
-
See the news Feed of the Social Network
-
Showing at least the title, date of published, Content (img & text), for each publication.
-
Show the list of all the users registered with profile picture and name
-
Publish
- Allow the user if logged to publish text content and img content
- Allow the user to delete their own publication if wanted
- Allow the user to Edit their own publication if wanted
- Just the same user as author can edit or delete their own publications.
- Responsive interface for tablets and desktops
- ECS6 only
- Component logic only
- Coverage of at least 50% of unit testing
- Use only JavaScript Vanilla ES6 (ECMAScript 2015 or higher), HTML5, CSS3
- Individual programming but track-1 as squad can make peer programming
- Fork this repository and clone your own, choose who will be the owner of the repository of the pair team.
- Start creating a new react app
- Deploy in git hub pages by each full component to deliver
- Create the Release branch (to deliver and deploy as source for gh-pages branch) and the Development branch (to work on it daily). Follow up the Github Guide https://docs.github.com/es/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
- Make a full responsive website considering responsive site specially for tablet or Ipad devices and Desktop.
- Follow up Semantic HTML rules, have header, navigation bar, main, sections, asides, footer, etc.
- Create an Assets folder to store the assets of the site.
- Document every Agile SDLC steps on ReadMe.md. During the planning step document a screenshot of your Backlog & the prioritized agenda per each one.
- Be sure your tests are passed while executing npm test
- Use Firebase authentication third-party services for at least one third-party app and also allow to login with email and phone number
- Data persistance: Data of the users, and publications must be persistent, store the data in Firestore Database.
- Mafe full CRUD: Create, Read, Update, Delete
- Two sprints of one week each demo in English only. Fridays by afternoon.
- For the second Demo, be ready to have testing users that will test your product and see your demo.
The boilerplate you can follow is the create-react-app template and create
CLUES:
You have can find many resources to follow, but always try to understand as well the original product documentation.
Additional Resources
These are some tips that can help you in organizing and carrying out your project, taking into account the development of your soft skills:
- To start an organization of your project, see with what resources accounts and the time you have to complete it.
- If there is something that you do not know, ask and try to solve it; you can start with a google search, then consulting your squad and finally your coach. If there is something that I do not know, someone else can help me. Learning is a collaborative process.
- Once you start to move forward ask for feedback, your colleagues may have excellent ideas or ways to solve the project that can help you.
- When you run into a problem, look for alternatives, and for that, consult different sources.
- If you already see yourself investing a lot of time in details, you should know how to prioritize and stick with the most important, projects have limited time and you must know how to manage it.
- Work as a team, ask questions and try to complete the project without giving up.
- Prepare your presentation, if I cannot communicate my ideas to others I do not know You will appreciate all the effort and work you put into it.
You are not limited to implementing only the mandatory part, you can go forward implementing this functionalities:
- The users can have a profile to personalize and share an about me, birthday or other relevant data to the Social Network phrase. Only each user can edit this info of themselves, and all the others can see it.
- The users can comment the posts.
- npm
- JSON
- ASYNC AWAIT
- DB Firestore
- My first CRUD in Firebase with React JS
- My first Data Structuring project
- import & export components
- GitHub Branch Modeling > Development > Release
This Readme should be replaced with the project documentation following the SDLC procedures for Agile Software Development Lyfe Cycle.