Inspired by Flickr, Travelr is a platform where users build a profile and collection of images related to travel, save images they like by favoriting them, share their thoughts on images through comments, and tag their images to locations.
| Live Site | MVP Feature List | Database Schema |
Travelr is built on React/Redux, HTML, and CSS for its frontend, Express and Sequelize for its backend, and a PostgreSQL database.
- Clone this repository
git clone git@github.com:ethanchen7/Travelr.git
- Install dependencies
npm install
-
Create a .env file in the root direction based on the .env.example given.
-
Create a user in psql based on your .env DB_USERNAME.
psql -c "CREATE USER <username> PASSWORD '<password>' CREATEDB"
-
Create a database in psql based on your .env DB_DATABASE.
-
Start your shell and migrate and seed the database.
npx dotenv sequelize db:migrate
npx dotenv sequelize db:seed:all
- Change directory into the frontend and backend folders in two shells. Run both servers with:
npm start
Images are rendered by pulling a random order of images from the image state. Image selections are refreshed upon component rerender / state changes. Users can hover over the image cards to favorite the image and view the user who published it and any tags they left related to that image. The image gallery is designed with a CSS grid, where the number of rows and columns an image takes up is dynamically calculated by using its height and width as a proportion to the total number of rows and columns in the gallery grid.
The profile page displays the user's published images, profile details, and the user's favorited images. The gallery component within the user page can be toggled to show the user's published images or "Photostream", or the user's favorited images. There is also an option to edit the profile details, including the profile picture, if the user is authenticated and is the owner of that profile.
Users are able to navigate to a page dedicated to showcasing their favorited images. Images are rendered from the user's profile state, which houses all the images that the user has favorited.
Clicking an image routes the user to a page that renders the image's comments, total favorite count, image owner, and tags. Users are able to interact with the image on this page through favoriting/unfavoriting, adding, editing, and deleting comments, or editing the image's tags if they are the owner of that image. Clicking the image on the page opens a zoom modal to bring focus to the image and its description.
The upload button in the navigation bar allows users to upload an image of their choice. Once successfully uploaded, the user is redirected to their profile page, where they can view the photo in their photostream.
Users are able to search for particular images, by submitting a search query with the tag of their interest in the search bar. Images with that tag are rendered in the gallery.
Clicking on a tag button from an image redirects the user to a page of images with that tag.
If the user navigates to a page that doesn't exist, they are brought to a page not found view, which features my Github and LinkedIn (and a picture of myself traveling in Seoul) :)
