The objective of this project is to build a responsive Single-Page Application (SPA) Social Network in which we can write, read, update and delete data. It is the first project on the Laboratory FrontEnd track.
The chosen theme was education. estuDÍA is a social network in which users have an interest in entering their university studies specifically at the Instituto Politécnico Nacional.
estuDÍa is aimed at all people regardless of age, sex or occupation who want to pursue higher level studies at the Instituto Politécnico Nacional.
In 2019, of the 92 thousand applicants who competed to obtain a place at the top level of the IPN, only 26%, equivalent to 24 thousand young people, had the opportunity to study in one of their 66 careers, in school or non-school modality.
In Mexico, educational quality is poor and is not standardized in schools. In the case of upper secondary education, the study plans vary from one educational institution to another, for example, the study plan of a CONALEP and a COBACH. they are the same and the educational gap is even more pronounced in schools in the interior of the republic.
The UNAM and the IPN two of the best universities in the country have their own upper-middle-level institutions (CCH, ENP and CECYT) in which the study plans are designed so that their graduates are able to take and pass their respective exams admission for higher education. However, many students from the interior of the republic, or from institutions with little educational quality, face a real challenge when it comes to studying and understanding subjects for entrance exams to the IPN or UNAM.
estuDÍA is created with the aim of creating a support network so that people interested in carrying out the admission process to the IPN, is a space where users through publications can share, tips, experiences And anything that they think can help others to take a selection exam and start the university stage and thus make the process easier and more solid among applicants.
In order to have a homogeneous distribution of the tasks to be carried out, to be informed of the activities, to contribute ideas, we relied on the GitHub "Pojects" tool, so our SCRUM could be consulted and modified by any of the three team members.
1️⃣ ME as a new user. I WANT to be able to create an account with valid email and password. TO be able to log in and enter the social network.
2️⃣ ME as a new user I WANT to have the option to log in with my Google or Facebook account TO enter the social network without creating a valid email account
3️⃣ ME as a logged in user I WANT to create, save, modify in the same place (in place) and delete a private or public (post) publication, which can be a phrase or an image
4️⃣ ME As a logged in user I WANT to be able to see all the public and private posts I have created so far, from the most recent to the oldest TO be able to change the privacy settings of my post.
5️⃣ ME as a logged in user I WANT to like and keep a count of likes in my publication as well as being able to write, save, edit or delete a comment in my publication
6️⃣ ME as a logged in user I WANT to be able to enter the social network TO be able to view the data of my created profile or edit it.
-If the email or password is not valid, when logging in, I should be able to see an error message. -It should be visible if there is any error message. -I must be able to see this creation page on Mobile and desktop (responsive). -You do not need to reload the page to create an account (SPA). -I must be able to publish text and images. -The user must be able to filter, edit and delete their publications.
-The functionality meets satisfies the acceptance criteria. -The functionality has unit tests. -The visual design corresponds to the high fidelity prototype.- -The code of this functionality received code review. -The functionality is deployed and public to be tested. -The functionality was manually tested. -Utility tests were carried out and feedback was implemented if deemed necessary.
During this stage we designed the user interface, we thought the name of our web application, the distribution of the elements to consult and how it would look on a cell phone screen.
We sought feedback five times from our bootcamp partners.
To develop this part we apply the feedback that our coach and our colleagues gave us, we also take into account the official colors of the National Polytechnic Institute: cherry and white. The hi-fi prototype was developed in Figma.
- semantic HTML
- CSS
flexbox - Build your application respecting the design made (layout).
- Dynamic DOM manipulation
- History API
- [
localStorage]
- Use of callbacks
- Consumption of Promises
- ES modules
(
import|export)
- Branches
- Pull Requests
- Tags
- Projects
- Issues
- Labels
- Milestones
- Modularization
- Nomenclature / Semantics
- Linting