Flickor is a clone of flickr and is a website that allows users to share all sorts of photos.
Live Link: Flickor
| Feature List | Database Schema | API Documentation
- Javascript
- React
- Redux
- Node
- Express
- PostgreSQL
- Sequelize
- HTML
- CSS
- Git
- VScode
When cloning Flickr I knew I had to incorporate the iconic splash page with the image gallery slideshow. To do this, I used an useEffect function and a setInterval function to create a set time for the photos to switch from one to another.
Another feature I wanted to incorporate into my clone is the custom image gallery. The custom gallery allows users to view any image in their collection and view the next or the previous image.
- Clone this repo
git clone https://github.com/bandrewi/flickor-onrender.git
- Install dependencies from the root directory
- npm install
- Create a POSTGRESQL user with CREATEDB and PASSWORD in PSQL.
- `CREATE UESR WITH CREATEDB PASSWORD <'password'>
- Create a .env file in the backend directory based on the .env.example found within the respective directory.
- Enter your username and password information into the .env file along with a database name, a secure JWT_SECRET, and a port # (preferably 5000).
- Add a proxy to the package.json file in the frontend directory. The proxy port should match up with the port you specified in the .env file. If you chose 5000 add the following proxy.
"proxy": "http:/localhost:5000"
- Create Database, Migrate, and Seed models
npx dotenv sequelize db:create
npx dotenv sequelize db:migrate
npx dotenv sequelize db:seed:all
- Start the application by running npm start in the backend and then the frontend directories
npm start
- After running npm start in the frontend directory, the project should open in your default browswer. If this not happen, then you can navigate to http://localhost:3000 to access the project
- You can access the website as a demo user via the demo login button or create an account and login with that.
Logged in users can perform the following actions:
- View/Add/Edit/Delete Photos
- View/Add/Delete Favorites