Social Network

Our own tinder clone
Explore the files »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgements

About The Project

This is a group project. Our idea was to build a clone of the famous dating application Tinder. Having just finished our first weeks of learning React, we wanted to put our coding muscles to test and apply all we had learned. We are aware of it's overall simplicity, but we would like to share that we had lot's of fun doing it. We also plan to keep adding feature in the future, so please keep tune for further updates and changes.

Built With

• React
• Sass
• React-Icons
• Material-UI
• React-Tinder-Card
• Unsplash

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

You need to make sure you machine has NPM installed and up to date.

• npm

  npm install

Installation

1. Clone the repo

   git clone https://github.com/hamzadarej/social-network.git <your directory name>

2. Move in the cloned repository

   cd <your directory name>

3. Download NPM packages

   3.1 npm install node-sass
   3.2 npm install react-router-dom
   3.3 npm install react-tinder-card
   3.4 npm install @material-ui/core
   3§.5 npm install react-icons

4. Run the application

   npm start

Usage

Wecome page

First you be will be greated by our welcome page: After carefull reading the instructions you can log into the application and start using it 😀

---

Cards page

This is where you will find information about other users and potential dates. We hope that you enjoy the swipe gestures, the overall design and layout of this page. Happy dating 🔥

---

Chat and messages page

After selecting people that you might have insterest in further interacting with this pages will have find more about each other and discover if you are a match. Be always polite and have fun talking to your crushes 😉

---

User profile page

In this page you will share information about yourself and make sure people can have a glimpse of how awesome you are 😎

Roadmap

We would be thrilled to have you following us along the process to make this application even better. We would like to let you know that we have some changes coming up, as we learn more about backend and database. Some of the features to be included:

• Log in athentication
• Functionality for the "edit info" button in the user profile page
• Real time messaging
• Dark theme

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Hamza Darej - github page - darejhamza@gmail.com Ruben Sinsig - github page - email Angelos Palaiologos - github page - mrpalaiologos@gmail.com Sergio Oliveira - github page - thesergioliveira@gmail.com

Acknowledgements

• Hadi Nsreeny, our amazing web dev teacher and mentor.
• Tareq, we appreciated all the assistance along the way.