Git Product home page Git Product logo

21-24w-technigo-final-project-ok's Introduction

Tröttis - Final project

Tröttis is community based website for people experiencing burnout syndrom where they can found information, resources and a forum to share their thoughts and feelings in a safe space.

App structure

Home/Login page

From the home page the user can access the resources page without loging in. If the user wants to share a thought they have to login/signup.

A login to test the page is: username:Lyo pass:kobelyo

The signup function will be finished later.

Sharing page

This is a simple forum where users can share with others a positive thought or an achievement. Other users can interact by liking the post.

Resources page

A collection of cards with contact information of different specialists that can help to heal burnout symptoms. The user can filter the results by clicking the buttons or by entering a key word in the search bar. The search bar search in all the fields of the cards.

Frontend

Frontend is built with React Hooks with Redux. For the routing I used React Router. For the styling I used Styled components.

Backend

The RESTfulAPI in the backend is built with Node.js. The data is stored in a database built with MongoDB and Mongoose. The dataset was created with Mockaroo, a database generator using fake data.

MongoDB Collections

users

The username and password are stored in this collection.

positivethoughts

This collection is created when the user shares a thought.

resource1

This collection lists personal and contact information of different specialists.

Endpoints

  • GET /resources_1 - endpoint to show the directory listing specialists contact information
  • GET /pos_sharing - endpoint to get all the thoughts shared by users
  • POST /pos_sharing - endpoint for the user to share a positive thought
  • DELETE /pos_sharing/:_id - endpoint to delete a positive thought
  • POST /post_sharing/:_id/emojis - endpoint to increase the amount of thumbsup
  • POST /signin - endpoint for the user to signin

Process

I started by making and mockup in Figma of all the views of the website. This helped me to have clearity of the pages, components and routing needed to structure my website.

I built my project following this order:

  1. BE and FE for the homepage + styling
  2. BE and FE for the resources page + styling
  3. BE and FE for the sharing page + styling

Cross-Browser Compatibility

  • Chrome
  • Edge
  • Safari
  • Firefox

View it live

BE: https://final-project-dannuzak.herokuapp.com/

FE: https://final-project-dannuzak.netlify.app/

21-24w-technigo-final-project-ok's People

Contributors

dannuzak avatar emolsz avatar dependabot[bot] avatar idlefingers avatar no-semicolon avatar

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.