Bee's Playgrounds

Live Demo

A Bee's playgrounds theme for collecting playgrounds that user've been. The playgrounds will show geo location, add and edit pictures, reviews and rating of the playground.

Features

• Minimalist Design
• Fully Responsive
• Full Stack Javascript
• Carefully Designed Cards
• Short Codes
• Show Geo Location in Map
• Tailwind CSS

Screenshots

Home Page Sections

List Playgrounds

Responsive Playgrounds

Show Playground

Post new Playgrounds

Getting Started

Prerequisites

• npm

  npm install npm@latest -g

  packages 📦

  • cloudinary
  • connect-flash
  • connect-mongo
  • dotenv
  • ejs
  • ejs-mate
  • express
  • express-mongo-sanitize
  • express-session
  • helmet
  • joi
  • method-override
  • mongoose
  • multer
  • multer-storage-cloudinary
  • passport
  • passport-local
  • passport-local-mongoose
  • postcss-cli
  • sanitize-html
  • @mapbox/mapbox-sdk

Installation & Requirements

1. Clone the repo

   git clone https://github.com/catzzz/PlaygroundsApp.git

2. Install NPM packages

   npm install

3. create CLOUDINARY API key in .env

    CLOUDINARY_CLOUD_NAME=`YOUR CLOUDINARY NAME`
    CLOUDINARY_KEY=`YOUR CLOUDINARY KEY`
    CLOUDINARY_SECRET=`YOUR CLOUDINARY SECRET`.

4. create MAPBOX API key in .evn

    MAPBOX_TOKEN=`YOUR MAPBOX TOKEN`

5. create MONGOALTAS url in .env

    DB_URL=`YOUR MONGODB URL`

Project Roadmap

• Home

  • view Playgrounds

• Playgrounds

  • List playgrounds
  • List playgrounds' Geo location in map by mapbox
  • Pagenation
    • Show Playground
      • Show reviews
      • Add a review
      • Delete a review
    • Edit Playground
      • Add multi images of a playground
      • Delet multi images of a playground
      • Edit title , description, location of a playground

• New Playground

  • Add multiple images of a playground
  • Add a title, a location and a desciption of a playground

• Login

  • Login with username
  • Username, email and password validation
    • ForgetPassword
      • Send reset email
    • ResetPassword
      • Reset password

• Register

  • Username
  • Email
  • Password
  • Confirm password
  • Username, email, password and confirmed password validation
  • Policy
    • Show privacy policy

• Profile

  • upload user image
  • Edit username
  • Edit email

Attribution

• Thanks Colt Steele for his design and code guidance.
• Many of the illustrations have been taken from heroicons and flaticon.

License

• MIT license