Introducing PinDrop - Your visual discovery platform

This is a submission for the The Pinata Challenge

What I Built

I've built a MERN stack application named PinDrop (inspired by Pinterest), which is an ideas sharing platform. You can upload ideas along with images which are saved in the Pinata's file API, or save other people's ideas.

Demo

Experience PinDrop live here:

dev-to-pinata-challenge-client.vercel.app

My Code

shravzzv / Dev.to-Pinata-challenge-client

Client for the Dev.to Pinata challenge created using React.

Dev.to Pinata Challenge Client

Project demo

Description

Client for the Dev.to Pinata challenge created using React. This project was a challenge from Dev.to. Project Source.

Features

• Routing using react-router-dom.
• Clean responsive design with both dark and light themes.

Technologies Used

Installation

To install the project, follow these steps:

git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-client
cd Dev.to-Pinata-challenge-client
npm install
npm run dev

How to Contribute

If you'd like to contribute, follow these steps:

1. Fork the repository on GitHub.

2. Clone your fork locally.

   git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-client
   cd Dev.to-Pinata-challenge-client

3. Create a new branch for your feature or bug fix.

   git checkout -b feature-or-bug-fix-name

4. Make your changes, commit them, and push them to your fork.

   git add .
   git commit -m "Your commit message here"
   git push origin feature-or-bug-fix-name

5. Open a Pull Request on GitHub, comparing your branch to the original repository's main branch.

Issue Tracker

Find a bug or want to request…

View on GitHub

shravzzv / Dev.to-Pinata-challenge-server

Server for the dev.to Pinata challenge created using express and mongodb.

PinDrop API

Project demo

Description

This is a REST API for the dev.to Pinata challenge Project Source

Features

• Restful API design.
• Clean error handling and code design.

API ROUTES

/users

1. post: /users/signup
2. post: /users/signin
3. put(private): /users/:id
4. delete(private): /users/:id

/pins

1. get: /pins
2. get: /pins/:id
3. post(private): /pins
4. put(private): /pins/:id
5. delete(private): /pins/:id

Technologies Used

Installation

To install the project, follow these steps:

git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-server
cd Dev.to-Pinata-challenge-server
npm install
npm run dev

How to Contribute

If you'd like to contribute, follow these steps:

1. Fork the repository on GitHub.

2. Clone your fork locally.

   git clone https://github.com/shravzzv/Dev.to-Pinata-challenge-server
   cd Dev.to-Pinata-challenge-server
   npm install
   npm run dev

3. Create a new branch for your feature or bug fix.

   git checkout -b feature-or-bug-fix-name

4. Make your changes, commit them, and push them to your fork.

   git add .
   git commit -m "Your commit message here"
   git push origin feature-or-bug-fix-name

5. Open a Pull Request on GitHub, comparing your branch to…

View on GitHub

More Details

Pinata takes center stage in this application! Here's how I leveraged its features:

• Effortless Image Uploads: I utilized the Pinata library from npm to seamlessly upload images to the cloud.

• Optimized Image Delivery: Pinata's built-in optimization features ensure efficient image delivery while maintaining quality.

Check out the code snippet demonstrating image upload and optimization with Pinata:

const asyncHandler = require('express-async-handler')
const pinata = require('../config/pinata.config')
const { Blob, File } = require('buffer')
const fs = require('fs')

/**
 * Uploads a given image to Pinata and returns the uploaded url. The image is optimized using Pinata.
 */
exports.getUploadedUrl = asyncHandler(async (fileToUpload) => {
  const blob = new Blob([fs.readFileSync(fileToUpload.path)])

  const file = new File([blob], fileToUpload.filename, {
    type: fileToUpload.mimetype,
  })

  const upload = await pinata.upload.file(file)

  fs.unlink(fileToUpload.path, (err) => err && console.log(err))

  const url = await pinata.gateways
    .createSignedURL({
      cid: upload.cid,
      expires: 5000000,
    })
    .optimizeImage({
      format: 'webp',
      fit: 'cover',
      gravity: 'auto',
      format: 'webp',
      sharpen: 5,
    })

  return url
})

Other features:

• Clean, Responsive Design: PinDrop delivers a sleek and user-friendly interface that adapts seamlessly to various screen sizes.
• Secure Authentication: User accounts are protected with robust JWT-based authentication, ensuring data privacy and integrity.
• Theme Customization: Choose between light and dark themes to match your preferred viewing experience. The application automatically adjusts to your operating system's theme settings. (Use Chrome DevTools to switch themes in the Rendering tab.)
• Advanced Search: PinDrop employs MongoDB Atlas Search for efficient and comprehensive search capabilities, allowing users to quickly find relevant ideas and content within the platform.