UniCafe

• 

  Landing page of UniCafe, where you can send queries to the website creator and getting to know the website

• 

  The home page of UniCafe where you can see al the posts by other users and the social events info

• 

  google maps

• 

  login page (With validation)

• 

  register page (With validation)

• 

  Social events info

• 

  public posts section

• 

  Profile page: personal info and posts management

Inspiration

Since we are all experiencing lockdown and social distancing, we need more virtual platforms for communication. UniCafe is a place designed for university students to share their thoughts and stories, also possibly making new friends.

What it does

1. After registration, you have access to read all posts posted by other bloggers and you will see their personal info such as email address.
2. Social events will be posted on landing pages. Also if you are interested in holding a social event, send a "Contact Me" form on the landing page to the administrator of this website(me). I will validate it and post it to the events gallery if possible.
3. There is a google map component on the landing page and the profile page which supports both automatic geolocation and searching for a specific location.

How we built it

React as frontend framework and node.js plus MongoDB as backend. Also, the frontend contains some Creative Tim styling kit components.

Challenges we ran into

1. Implementing Google maps
2. Wrap my head around tons of react components
3. Testing backend info models solution: carefully debug

Accomplishments that we're proud of

Finally, deploy the website to Heroku and see it running!

What we learned

Full-stack development in a nutshell

What's next for UniCafe

The backend system is still a bit basic and simple, and I will add more diversity to the info models if possible.

Built With

• javascript
• mongodb
• node.js
• react