🏎 Auto Exposure

🥇Voted Best Project in CS110: Intro to Web Development

Authors:
Rajbir Johar
Danial Beg
Matthew Lee
Isaac Curiel

Table of Contents

1. Purpose
2. Instructions
3. Technologies
4. File Structure
5. Third Party
6. In Progress
7. Contact

Purpose

Auto Exposure is a social media site designed for car enthusiasts in mind. You can upload and share photos of your cars or admire photos of other people's cars and bond over the thing we all love so much.

Features

Features included or will be included:

• Next.JS
• Static Site Generation
• Dynamic routes
• Middleware
• User profiles and visiting
• Uploading image urls and captions
• Authentication
• Account verification
• Sessions
• Deleting posts
• Uploading direct images
• Commenting
• Deleting comments
• Liking
• Minimal and clean UI/UX
• Dark Mode
• Search bar

KISS - Keep It Simple Stupid

• Serverless ready and no Express used at all
• No SASS, Redux, etc

Instructions

1. git clone https://github.com/CS-UCR/Auto-Exposure.git
2. cd Auto-Exposure/
3. yarn
4. yarn run dev
5. localhost:3000 in your browser.

Technologies Used

What we used or will use to build this:

• Yarn
• Next.JS
• TailwindCSS
• MongoDB
• SendGrid
• Cloudinary

File Structure

├── master
│   ├── branch frontend
│   │   ├── pages
│   │   │   ├── index.js
│   │   │   ├── _app.js
│   │   ├── ...
│   ├── branch backend
│   │   ├── api
│   │   │   ├── feed.js
│   │   │   ├── profile.js
│   │   ├── ...
│   ├── ...
└── .gitignore

Third Party Packages and Libraries

• TailwindCSS
  • Used for the majority of our styling. This was a good move from the start since it greatly speeds up the time it takes to develop and design clean UI without messing with custom CSS.
• MongoDB
  • Used as our main database to hold all user-centric information including:
    • First/last names
    • Usernames
    • Emails
    • Passwords
    • urls to Profile Pictures
    • urls to Post Pictures
    • Posts attached to users
      • Comments
      • Likes
• Cloudinary
  • Used as our secondary database to hold all the physical images including:
    • Profile Pictures
    • Post Pictures
    • Default profile pictures come from here.
• SendGrid
  • Used as our account verification and password reset medium by sending the users emails.

In Progress

We decided to push some features to the end/abandon because we would rather serve a polished UI/UX rather than buggy code and broken features with lacking UI/UX. For instance:

• we had a pagination fetch in the beginning but it was interfering with our deleting and liking so we ended up disabling it for now until we figure out an elegant solution to the problem.

When you're a carpenter making a beautiful chest of drawers, you're not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. - Steve Jobs

More Work and Contact

Rajbir Johar

Danial Beg