Lost and Found

Killer feature: AI image objects detection

Powered by Clarifai

Application for fast image categorization and searching

Live web-application (hosted by render.com)

Technologies

• Server:
  • Node.js
  • Express.js
  • PostgresSQL
  • Sequelize
• Client:
  • React.js
  • React Query
  • Axios
  • MaterialUI
  • Clarifai general image recognition model

Use cases

Registration

• Anonymous user can enter username and password.
• User should repeat password.
• User can sing up.

Login

• User can enter username and password.
• User should be able to sign in.

Main page

• This page should be accessible only to logged user. If user not logged in, she should be redirected to login page.
• User can view all her tags.
  • Tags are selectable.
  • If clicked, photos should be filtered by the selected tag.
• User can view all her photos.
  • Photos should show associated tags.
• User can go to upload page.

Upload page

• This is protected page.
• User can select photo from local disk.
• User can add associated tags.
• User can upload photo.

Photo page

• This is protected page.
• This page is accessible from clicking on the photo.
• User can view photo and associated tags.
• User can delete photo via dialog.

Profile page

• This is protected page.
• This page is accessible from clicking on the username.
• User can view all tags and delete them.
• User can view amount of photos.
• User can change password.

Server API

/user

• POST register
• GET / get current user
• GET /:id get current user by ID

/auth

• POST authentication
• GET get current authentication status
• DELETE finish sesstion

/file

• POST upload file

/photo

• POST create photo
• GET /:id get photo by ID
• GET /?query=abc search photos by a query string
• PUT /:id update photo
• DELETE /:id delete photo

/tag

• GET / get all tags of the user
• DELETE /:id delete tag

Database

User

• ID
• username
• password
• created_at

Token

• ID
• token
• user_id
• created_at

Photo

• ID
• user_id
• name
• created_at

Tag

• ID
• user_id
• name
• created_at

Photo to Tag

• photo_id
• tag_id

Development

Installation

npm install
# don't forget to edit .env files and to add API URL and database credentials 

Run both server and client

npm start

Todo

• Architecture:
  • Redirect to /login if not authorized.
  • Material UI fancy design.
  • Move to PostgresSQL.
  • Change favicon.
  • Use bcrypt for password hash.
  • Use JWT token
    • https://www.digitalocean.com/community/tutorials/nodejs-jwt-expressjs
    • https://developer.okta.com/blog/2019/02/14/modern-token-authentication-in-node-with-express
    • https://dev.to/mihaiandrei97/jwt-authentication-using-axios-interceptors-55be
    • https://medium.com/@ryanchenkie_40935/react-authentication-how-to-store-jwt-in-a-cookie-346519310e81
  • Create nice color scheme https://bareynol.github.io/mui-theme-creator/
  • Change theme.
  • Use ReduxToolkit + RTKQuery.
  • Networking:
    • Axios (get rid of credentials: include).
    • Centralized error handling with popup.
    • React query for API call status.
• Tooling:
  • Deploy to render.com.
  • ESLint + Prettier.
  • Test API with Supertest.
• Upload:
  • Upload photo form + server route.
  • Spinner.
  • Resize images on server side.
  • Enter tags with whitespace.
  • Filter already existing tags.
  • Forbid selecting multiple images (mobile).
  • Form validation.
  • Show preview of photo on upload https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded
• Home page.
  • get all photos
  • list of tags
  • search by tag
  • Spinner for tags, empty block if no.
  • Spinner for images.
  • Tile images for mobile.
  • Show "deselect" button on tag.
  • Show "Upload your photos" as alert which is visible if there are no photos or user not closed it.
  • Select multiple tags.
  • Pagination or infinite loading.
  • Photo block:
    • Show associated tags.
    • Edit or "View details" page.
• View details page:
  • Delete button (with dialog).
• Login/registration pages:
  • View password.
  • Add capital letters.
  • Fix blinking on login.
• Profile page:
  • view all tags and delete them (dialog).
  • view amount of photos.
  • change password.