Picto

Contents

• Introduction
• Technologies Used
• Dependencies
• Database Schema
• How to use
• Screenshots

Introduction

Picto is a simple photo sharing app created using React JS and PHP. The authorized user can post pictures, like others post. The main purpose of this project was to learn React JS and how it interacts with the backend technologies, therefore this app (in its current version) misses few features such as commenting on post, deleting a post, forget password, etc. These missing features will be added in its new version.

current version: 1.1

Technologies Used

Front-end: React JS, Bootstrap
Back-end: PHP, MySQL

Dependencies

• React JS runs on port no. 3000 and my PHP projrct runs on port no. 9090, thus to enable cross-origin data communication use a chrome extension called Allow CROS.
  CROS chrome extension

• react-router-dom : To install react router dom use

  >npm install react-router-dom
  

• js-cookie : js-cookie is used to store cookies in browser. To install js cookie use

  >npm install js-cookie
  

Database Schema

DataBase name: pictodb

pictodb
  |--users
  |--post_list
  |--like_post

Table: users

Column Name	Type	Default	Null	Extra
id	int		no	primary key, auto increment
username	varchar(50)		no
userpassword	varchar(200)		no
email_id	varchar(140)		no
is_active	int	1	no
doj	date		no
profile_pic	mediumtext		no
caption	varchar(140)		yes

Table: post_list

Column Name	Type	Default	Null	Extra
post_id	int		no	primary key, auto increment
title	varchar(80)		no
user_id	int		no	foreign key refs, id from users
post_date	datetime		no
pic_src	mediumtext	1	no
caption	varchar(160)		yes
likes	int	0	no

Table: like_list

Column Name	Type	Default	Null	Extra
post_id	int		no
posted_by	int		no
liked_by	int		no

How to Use

• Clone the projet and save it to your local desktop.
• Inside the project folder you can see various folders such as back-end, front-end, etc. Open the back-end (php) folder and copy-paste the folder picto to your www directory if you are using WAMP or to your htdocs directory if you are using XAMPP.
• Copy the contents of front-end folder and paste them in your react application. To create a react app you can use the command npx create-react-app your_app_name.
• Create the Database and tables according the schema as mentioned above.
• Open command prompt in your react directory and start the react server by typing npm start.

Screenshots