TINDER CLONE 
Web Application Development using ReactJS Framework

TINDER CLONE Web Application Development using ReactJS Framework

React is an open-source, front end, JavaScript library for building user interfaces or UI components. This project aims at creating a robust web app using ReactJS framework

Screenshot (57).png

TEAM MEMBERS :-

Introduction

ReactJS is a JavaScript framework that makes designing advanced and responsive interfaces hassle-free. It is a highly scalable, super-performing framework, built and maintained by the folks at Facebook & Instagram. Further, it provides simple views and associations with each of the state behaviors in your application with out-of-the-box developing tools to write code and bring top quality user interfaces to life. In this project, we have tried to make a tinder clone using ReactJS framework and have enabled basic features available on the tinder web app. It provides user features to super like or left swipe people according to your choice.

Why ReactJS?

ReactJS has a rich library that allows you to express how your application should be built depending on your requirements. ReactJS even manages the dependent UI when any update or changes are made in the underlying data, reflecting across the application. It uses an auto refresh feature to update the changes based on state management.

Framework’s Key Feature.

ReactJS is highly flexible and its interfaces can be easily migrated to other libraries and frameworks. It has a unique functionality called ‘mark down the libs’ which allows it to comfortably debug while inspecting the root cause for failed cases. Apart from this, there are a few more features listed below which make ReactJS framework one of the most popular frameworks in the current market. The ReactJS framework can be used for building cross-platform native mobile and web applications. It has rich component support, which can also be used as reusable components. It is much faster since the underlying DOM manipulation utilized is called Virtual DOM. State management could be achieved by using Redux to share data across an application. JSX is a combination of JavaScript with XML which makes it faster and allows easy rendering. Performance and testing are easy for maintaining the current state and triggering actions along with the functions.

Project’s System Requirement

WINDOWS: OS: Windows 7 SP1 64-bit, Windows 8.1 64-bit, Windows 10 64-bit Free storage: 2 GB minimum, 4 GB Recommended (Our IDE was VSCode) 4 GB RAM minimum, 8 GB RAM recommended 1280 x 800 minimum screen resolution Pre installed tools: Windows PowerShell 5.0 or newer Git 2.x Node package manager(npm) Create-my-react-app cloned from github

Recommended Specification

The build process consumes lots of resources, especially CPU. If the machine is too old, it will be too hot and we may have to pay more time than usual as well as suffering stress while developing apps with Flutter. OS: Windows 10 64-bit CPU: Intel Core i5-8400 Memory: 8 GB RAM Free storage: 5 GB SSD Tools: Windows PowerShell 5.0+, Git 2.x

Tools and Technologies Front End/UI Development : IDE (VSCode 1.54) Java Runtime Environment 1.6 or above Create-my-react-app cloned from github SDK-tools Npm installed Stable Internet Connection

Detailed Design Our project consists of 8 javascript files as of now. The 8 javascript files are as follows :- App.js :- It consists of the code that defines the workflow of our webapp. Index.js :- It is the main file of our web app that connects all our js files. Action.js:- It consists of code that defines the action that the user can perform using this web app. Header.js:- It consists of the header file of our web app . LikedPerson.js:- It consists of the code to define the number of people you liked. Logo.js:- It consists of logos and other features of tinder. Lonely.js:- It consists of the code that will run if the person doesn’t match with anyone he liked. Person.js :- It consists of the list of people available in the nearby area.

Cloning the create-my- react-app

You’ll need to have Node 10.16.0 or later version on your local development machine (but it’s not required on the server). We recommend using the latest LTS version. You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects. To create a new app, you may choose one of the following methods:

npx
npx create-react-app my-app
(npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)
npm
npm init react-app my-app
npm init <initializer> is available in npm 6+
Yarn
yarn create react-app my-app
yarn create <starter-kit-package> is available in Yarn 0.25+

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

my-app ├── README.md ├── node_modules ├── package.json ├── .gitignore ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── index.css ├── index.js ├── logo.svg └── serviceWorker.js └── setupTests.js

No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder: cd my-app Inside the newly created project, you can run some built-in commands: npm start or yarn start Runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

npm test or yarn test Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit. Read more about testing. npm run build or yarn build Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed.

Deploying the application on Vercel

We deployed our webapp with a Vercel for Git, making sure it was present in the form of our github repository. People can use version control other than git to deploy their webapp on Vercel also.

Screenshot (61).png

The link to our github repository:- github.com/xanushkasrivastavax/tinder

The link to our web app :- tinder-one.vercel.app

Creator

Anushka Srivastava hashnode.com/@xanushkasrivastavax

Pranjal Tiwari hashnode.com/@praanjaltiwaari

Chinmay Agarwal hashnode.com/@chinmay608

Priyam Agarwal hashnode.com/@PriyamAgarwal