Skip to content

Latest commit

 

History

History
144 lines (98 loc) · 4.2 KB

README.md

File metadata and controls

144 lines (98 loc) · 4.2 KB
Raw

Camagru is a mock/clone image sharing site where users can either upload or take photos with their webcamera and edit them by adding 'stickers' ontop.

The aim of this project, the first Web project from the 42 / WeThinkCode_ curriculum, is to develop a website and demonstrate the learning of the basic fundamentals of web development using CSS, HTML, JS with PHP acting as the backend / server side language.

Installation

Prerequisites

A local apache server to host on, in this case we will make use of bitnami local server environments

MacOS

Windows

Linux

NOTE - this project hasn't been tested on a linux based system

Clone

Clone this repo to your local machine using:

cd [Insert path to your MAMP/ WAMP / LAMP Directory ]/apache2/htdocs
git clone https://github.com/CLetinic/Camagru.git

Setup

Configuring Server Environment

Locate and run the executable file

Server

Configure Server port

NOTE - by default the server is set to port 80 we need to change it to 8080

Server Server

Start the server Server

Browse to site location http://localhost/Camagru

NOTE - by default the server is set to port 80

Configuring Camagru

Changing Camagru Variables

In [Insert path to your MAMP/ WAMP / LAMP Directory ]/apache2/htdocs/Camagru/config/database.php

Change the password of $DB_PASSWORD, to the password chosen during from bitnami setup.

Database_Configuration

Creating Database and Tables

To create database and tables:

In the browser, navigate to
http://localhost/Camagru/config/setup.php

Database_Configuration

Samples | Screenshots

Landing | Home page

Screenshot_Landingpage

Photobooth

Screenshot_Photobooth

Uploading A Photo

GIF_PhotboothWebCam

Taking A Photo With The Webcam

GIF_PhotoboothUpload

Project Insight

Project Brief

Project Trello | Project Breakdown | Project Planning

Project Markingsheet | Project Testing

Project Stack / Technologies

Front-End

  • HTML
  • CSS
  • Javascript

Back-End

Databse

References | Attributes

Project File Structure

Camagru
├── assets
│   └── ...                               # Front-End - Images / Assets
├── config
│   ├── database.php                      # Database - Configuration
│   └── setup.php                         # Database - Table Creation
├── css
│   └── style.css                         # Front-End - Styling
├── javascript
│   └── ...                               # Front-End - Web Componets - e.g modal.js
├── misc
│   ├── documents
│   │   ├── camagru.en.pdf                # Project Brief
│   │   └── camagru.markingsheet.pdf      # Project Marking Sheet
│   └── images
│       ├── MAMP
│       │   └── ...                       # README - Server Setup
│       └── ...                           # README - Project Screenshots
├── php
│   └── ...                               # Back-end logic
├── author
├── index.php                             # Front-end logic and Project core
└── README.md