Coder Social home page Coder Social logo

friendier's Introduction

Friendier

Friendier is web app that is designed to connect people together. You can start using the app here https://friendier-app.vercel.app

Installation and Running

Just clone the repo and run npm install followed by npm start

Features

  • Add people (stored in-memory with Redux)
  • Connect any two people (make them friends)
  • Find connections between people

Technologies used

  • React 17.0.2
  • TypeScript 4.4.3
  • Bootstrap 5.1.1

TS types

  • Handler () => void

  • HandlerWithParam (param: string) => void

  • ButtonProps { text: string; styleClass: string; handler: Handler; }

  • Person { firstName: string; lastName: string; email: string; friends: Array<number>; }

  • TableProps { people: Array<Person>; showFriends: boolean; }

  • ModalProps { isOpen: boolean; toggle: Handler; }

  • FormProps { emailSetter: HandlerWithParam; firstNameSetter: HandlerWithParam; lastNameSetter: HandlerWithParam; }

App architecture

app-arch

Core feature (Find connections)

Finding connections between two people is the main purpose of this app. Using the depth-first traversal algorithm, the app can find a connection between any two people using their emails. Here is the people's graph you will find in the app:

people-graph

The connection between bobby and paul would be: Bobby Fischer --> Vishwanathan Anand --> Magnus Carlsen --> Paul Morphy

Downsides

  • The app does not find all connections or the shortest one, it just finds a connection.
  • Redux store is not implemented with TypeScript.

friendier's People

Contributors

rowenaravenclawwithextraclaws avatar

Watchers

 avatar  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.