svlowman/tagtrace

TagTrace

TagTrace is a tool for creative management of your image collection with help of tags.

Watching digital images, we are usually tied to the structure of the folders they contain them. TagTrace helps you to compile your own image collection online, tag the images and then click through them, being independent from rigid folder structures.
Your tags you can follow like traces leading through your image collection. Each image thus becomes a topical node point, looking at them one after another becomes like strolling through a rhizome-like mesh of associative cross references.

I developed TagTrace as capstone project during my web development bootcamp at neue fische in Cologne.

To get it running:

• Clone or fork the project
• Run npm i
• In order to run the databases, you need an account each for MongoDB and Cloudinary. Deposit your keys in a .env file
• npm run dev starts the server

tagtrace's Issues

Install media query, expecially for landscape-orientated screens

User Story

I want media queries, so that the design changes, especially when I want to use the application on a desktop and not on a phone.

Notes, Links, Further Descriptions

...

ToDos

• Research how media queries work
• Use media queries for tagging page
• Use media queries for gallery page

Create registration page

User Story

I want a single page for registration, so that - if don't have an account - can create myself one.

Notes, Links, Further Descriptions

...

ToDos

• Implement page
• Style form and buttons

Get rid of useEffect-Warning

User Story

I want the useEffect-warning to disappear, so that Github does not throw any errors.

Notes, Links, Further Descriptions

...

ToDos

• See how the problem can be fixed.

Tidy up template

User Story

As a developer, I want to start from scratch with a white page.

Notes, Links, Further Descriptions

...

ToDos

• Create a component that says 'Hello World!' and link it to app.js - as only element

Make uploaded image appear on the tagging page automatically

User Story

I want some kind of mechanism, so that whenever I upload an image, it is automatically displayed on the tagging page.

Notes, Links, Further Descriptions

...

ToDos

• First of all, find out how it works

Bugfix: Make deleted tags disappear immediately

User Story

I want a tag to disappear immediately when I delete it, so I can see it is actually deleted.

Notes, Links, Further Descriptions

...

ToDos

• See how that works

POST-Route to MongoDB

User Story

I want an POST-Route to MongoDB so that I can (via input field) add imageEntries and tags to my database.

Notes, Links, Further Descriptions

...

ToDos

• Create a route for posting imagesEntries
• Create a route for posting new tags
• Build a form for posting tags

Adjust structure of image containers

User Story

I want the image containers to be responsive so that they display portraits and landscapes in the same size.

Notes, Links, Further Descriptions

...

ToDos

• Get familiar with object-fit
• Implement
• Place arrows for next and previous image correctly

Make possilble to select next and previous image with keys

User Story

I want to switch to the next image not only by clicking a button, but also by using keys, so that I can view the images just using the keyboard.

Notes, Links, Further Descriptions

...

ToDos

• First see if that is possible.

BugFix: Make new set tags appear on the gallery page as soon as you switch there

User Story

I want to see a new tag immediately when switch to the gallery page, so that I can see it is actually there.

Notes, Links, Further Descriptions

...

ToDos

• See how that might work

Make next-image-button and previous-image-button work infinitely

User Story

I want the buttons for next image and previous image skip to the image array loopwise, so that there are no "dead ends", the button never gets disabled and my clicking procedure never has to stop.

Notes, Links, Further Descriptions

...

ToDos

• Try to change the button functions

Show the same image when switching between tagging page and gallery page

User Story

I want some mechanism so that: I switch from tagging page to gallery page, and it still displays the same image as before, and vice versa.

Notes, Links, Further Descriptions

...

ToDos

• Find out how that works
• Implement this mechanism

Feature request: replace icon buttons => label text, e.g. "Add image"

User Story

As a user I want to know what the buttons in the nav bar are good for, so I want labels on them

Notes, Links, Further Descriptions

...

ToDos

• labels text

See how Navbar can be hidden on login page and registration page

User Story

I want the navbar to be hideable, so that I only see it on the upload page, on the tagging page and on the gallery page - but not on the login page and on the registration page.

Notes, Links, Further Descriptions

...

ToDos

• [ ]

GET-Route from MongoDB

User Story

I want a GET-Route from MongoDB so I can display the image links in the front end.

Notes, Links, Further Descriptions

...

ToDos

• Write a Route
• Check if information is displayable

Filter function for the images-array to display only images with a certain tag

User Story

I want a function to filter the images-array, so the gallery page does only display those images assigned with a certain tag.

Notes, Links, Further Descriptions

...

ToDos

• See how an array can be filtered in the appropriate way
• Write a function that filters the images

Create Post-Route to database for new accounts

User Story

I want a Post-Route for new accounts so that I can create a new user account with an own document in the database.

Notes, Links, Further Descriptions

...

ToDos

• Create Post-Route
• See how the necessary data can be put there (array for images!)

Layout: Logo overlaps with UX elements

User Story

As a user
I want to have the logo out of the way of the buttons
Because I might not see the buttons or may not be able to click on the buttons

Make password on login page necessary to continue to upload page

User Story

I want to put in a user name and password on the login page, so that I need to match my user data to continue to the app.

Notes, Links, Further Descriptions

...

ToDos

• Fetch password from databank
• Compare password from databank with input password

Make image slide scrollable

User Story

I want the image slide to be scrollable, so that it can be as long as I want.

Notes, Links, Further Descriptions

...

ToDos

• Find out how that works
• Implement

Make tags shown on tagging page link to gallery page

User Story

I want to click on the tags displayed on the tagging page, so that I am brought to the gallery page, where the clicked tag filters the image-array.

Notes, Links, Further Descriptions

This implies that there is already a function that filters the image-array on the gallery page.

ToDos

• Write function

Install a DELETE-Route that deletes images and tags

User Story

I want delete-buttons for images and tags, so I can remove them if I wish to do so.

Notes, Links, Further Descriptions

...

ToDos

• Build a DELETE-Route
• Create buttons
• Implement function to use DELETE-Route

Get a URL to MongoDB automatically

User Story

I want some implementation so that a URL I get back from Cloudinary is automatically posted in MongoDB with a ID of its own.

Notes, Links, Further Descriptions

...

ToDos

• Find a way to manage this (research, ask colleagues)
• Implementation?

Create upload function

User Story

I want an upload button so that I can upload an image to Cloudinary and get back a link to the page that displays the image.

Notes, Links, Further Descriptions

...

ToDos

• Build a button that allows to upload images
• Implement a connection to Cloudinary that allows a POST

Create Splash Page

User Story

I want a splash page so that I see the title of the app for a few seconds when I start the app.

Notes, Links, Further Descriptions

...

ToDos

• Build splash page
• Wrap splash page into app.js

Deploy project on Heroku

User Story

I want this project to be deployed on Heroku, so that I can access it online

Notes, Links, Further Descriptions

...

ToDos

• Check and recall how deployment on Heroku works.

Create basic gallery function

User Story

As a user, I want the gallery to work so I can watch the images that are uploaded on the database.

Notes, Links, Further Descriptions

On the gallery page: map through pictures from database.

ToDos

• Find out how exactly a gallery works
• Build a structure that allows to watch the mapped images from the database

Build basic page structure

User Story

I want to have three pages (later on used for: 1. upload images, 2. tag images, 3. view images), so that I can switch between them.

Notes, Links, Further Descriptions

...

ToDos

• Build routes for the three pages
• Make it possible to switch between pages

Make possible to switch current tag on gallery page

User Story

I want to switch the current tag on the gallery page, so that the images-array gets filtered for this special tag.

Notes, Links, Further Descriptions

This implies that there is already a function that can filter the images-array for images given one certain tag.

ToDos

• Write a function

Create login page

User Story

As a landing page, I want a page that shows a form where I can sign in for my accaount oder get registrated (at first, only the elements; does not have to work).

Notes, Links, Further Descriptions

...

ToDos

• Build the elements: input fields and buttons.