Skip to content

btahir/nerdogram

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Nerdogram

Nerdogram is an open source, very original, photo sharing app that is exclusive to folks who have a Github account i.e. you can only sign up if you have one. You can see a Live Demo here.

Why?

Why not? Let's make nerds cool again by sharing photos of our favorite Github projects. A picture is worth a thousand lines of code as they say.

The Tech

  • Next.js + Tailwind CSS
  • Next-Auth + Github OAuth for authentication
  • Heroku Postgres SQL Database to store the data
  • Cloudinary to store images
  • Prisma to interact with the data
  • Vercel to deploy site on
  • Font Awesome Icons

Issues/Todos

  • Currently using Github name and not username for user id which is problematic as this is not unique and will lead to issues for users signing up with the same name. Need to update Prisma Adapter for this.
  • No pagination. Currently just loading ten posts on the feed. For more need to add pagination to queries, store the state and infinite scrolling to render more updates.
  • No searchability. The search bar is not functional.

How to use

You will need to setup a Heroku Postgres SQL Instance. I recommend this guide. This [article] (https://vercel.com/guides/nextjs-prisma-postgres "article") goes more in depth on how to integrate prisma into a Nextjs app.

You will also need to setup a Cloudinary account for images.

Setup Environment variables

Create a .env file in the root directory. You need to add these variables:

DATABASE_URL=
GITHUB_ID=
GITHUB_SECRET=
NEXTAUTH_URL=http://localhost:3000/api/auth  (change once you deploy)
NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=
NEXT_PUBLIC_CLOUDINARY_UNSIGNED_UPLOAD_PRESET=

Installation

Change into the project directory. Make sure you have prisma installed and then push your database:

npm install prisma --save-dev
npx prisma db push --preview-feature

Run the following command to install all dependencies and start the app:

yarn && yarn dev

Update Site Metadata

You can update your site metadata in the next.config.js file.

env: {
  siteTitle: 'Your Company',
  siteDescription: 'Your company description.',
  siteKeywords: 'your company keywords',
  siteUrl: 'https://nerdogram.vercel.app',
  siteImagePreviewUrl: '/images/main.png',
  twitterHandle: '@your_handle'
} 

Update Colors

You can update the color palette in tailwind.config.js file.

colors: {
  palette: {
    lighter: '',
    light: '',
    primary: '',
    dark: '',
  },
},

Update Progressive Web App (PWA) data

Update the manifest.json file and the icons under the public/images/icons folder.

You can use free tools online such as https://realfavicongenerator.net/ to quickly generate all the different icon sizes and favicon.ico file.

License

MIT

Buy Me Coffee!

If you did find this useful and want to show your appreciation you can buy me a coffee 😃