Giter Site home page Giter Site logo

tinder's Introduction

Companion

This is a simple clone of Tinder’s application. It allows users to like and dislike other users and see their list of matches.

Features:

  1. Users will be able to create an account and login with their credentials.
  2. A list of other users will available for each user to like or dislike.
  3. Users will be able to see a list of their matches.
  4. The app also allows users to update their profile information.

This app was built using ReactJS for the front-end side and Python Flask for the backend side.

The app builds on top the following Hasura APIs:

  • Hasura Data API
  • Hasura Auth
  • Hasura File APIs
  • Postgres instance in the cluster

Instructions on using the app

  1. Go to this URL: Companion

You will see the Login/Signup page. Enter your the Username and Password for creating a new account or logging in.

  1. Create Account Page

This page will appear if you are creating a new account for the app. Users already having their accounts for the app will not see this page. On this page, users need to enter data in the corresponding field and upload their profile picture.

  1. Suggestions Page

After logging in, the users will be taken to Suggestions page. On this page, users will see other users they can like or dislike based on their preference. There are two buttons at the bottom of the page and two button at the top. Clicking on the bottom right button indicated a “like” whereas clicking on the bottom left indicates a “dislike”. Clicking on the top right button, takes the user to his/her Matches page. Clicking on the top left, takes the user to his/her Profile page.

  1. Matches Page

When a user clicks on the top right button, he/she is taken to his/her Matches page. This page shows a list of users with whom he/she matched and liked. After viewing the users list, the user can navigate back to the Suggestions page by clicking on the back button on the top left side of app.

  1. Profile Page

The users can go to their profile page by clicking on the top left button on the Suggestions page. On this page, users can see their profile picture, name and age. Clicking on the settings button, takes the users to their Settings page. Settings page allows the users to update the information for the city field and enter the gender of the other users they are looking for. After updating the information for these two fields, users can click on done button to go back to the Profile page. Users can also logout of the app and delete their app account as well.

Back on the Profile page, users can click on the Edit Info button and go to their Account page to update their profile information. After updating their profile information, the users can click on the Update or Cancel button to navigate back to the Profile page.

If the users are done using the Profile page, they can navigate to the Suggestions page by clicking on the top right button.

Prerequisites

  • We will use Node.js along with the express framework to build our server. Ensure that you have Node installed on your computer, do this by running node-v in the terminal. If you do not have Node installed you can get it from https://nodejs.org

  • Before you begin, ensure that you have the latest version of the hasura cli installed. You can find instructions to download the hasura cli from here

Future Scope

Currently, our app is quite simple but we want to improve it further by implementing few changes in the future. We aspire to refine its UI further and eventually add few more features to it.

tinder's People

Contributors

13banda 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.