TheLazy.Dev
Portfolio GitHub

Blog

devchallenge |pinatachallenge |webdev |fullstack

Introducing PinDrop - Your visual discovery platform

shravzzv

Sai Shravan Vadla

Posted on October 14, 2024

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

Landing page

Pin page

My Code

GitHub logo 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

My Skills

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
Enter fullscreen mode Exit fullscreen mode

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
    Enter fullscreen mode Exit fullscreen mode

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

    git checkout -b feature-or-bug-fix-name
    Enter fullscreen mode Exit fullscreen mode

  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
    Enter fullscreen mode Exit fullscreen mode

  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

GitHub logo 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

My Skills

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
Enter fullscreen mode Exit fullscreen mode

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
    Enter fullscreen mode Exit fullscreen mode

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

    git checkout -b feature-or-bug-fix-name
    Enter fullscreen mode Exit fullscreen mode

  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
    Enter fullscreen mode Exit fullscreen mode

  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
})
Enter fullscreen mode Exit fullscreen mode

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.
💖 💪 🙅 🚩
shravzzv
Sai Shravan Vadla

Posted on October 14, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Introducing PinDrop - Your visual discovery platform
devchallenge Introducing PinDrop - Your visual discovery platform

October 14, 2024