Inspired by Flickr, Wallpapr is an image sharing single page app where users can share their favorite desktop wallpapers as well as view other users' uploads and profiles. Users can interact with other users by leaving comments on their profile.
- Engineered with Redux to create a single page app to dynamically render React components without a refresh
- Generated a Node.js backend using the Sequelize ORM to handle validations and PostgreSQL database queries
- Used React to create a splash page setup similar to Flickr by incorporating element manipulation
- Configured Bcrypt to hash user passwords and store them in the database to implement access control lists
- Implemented a custom modal framework using React component architecture allowing for efficient development of new forms
- Utilized AWS S3 to implement user image uploads to reduce server load allowing for scalability of the webapp's image sharing services
-
Clone this repository
git clone git@github.com:Kxvin1/wallpapr.git -
Install dependencies in the
backenddirectorynpm install -
Install dependencies in the
frontenddirectorynpm install -
Create a .env file 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 the database, migrate, and then seed
npx dotenv sequelize db:createnpx dotenv sequelize db:migratenpx dotenv sequelize db:seed:all -
Start a server in both the
backendandfrontenddirectories by running:npm start
- The splash page shows when a user is not currently logged in.
- Users can log into an existing account or sign up. Alternatively, users can test the site with the Demo Login feature.
- The bar at the top with the logo, login and sign up buttons is the navigation bar of a user who is not signed in.
-
Once the user is logged in, the user's navigation bar changes and they can also view all images posted on the Discover page.
-
They will also gain access to an Uploads page, where they can view, edit, and delete images they've uploaded. And the other page is the Profile page (explained in User Profile section).
- Clicking on an image will display a zoomed in modal of that image, with the image's tags and a clickable link to the profile of the user who uploaded the image.
- Clicking on the username shows the profile of the user (shown further below)
- A user can post a new image by clicking the upload icon (arrow pointing up, next to the log out button) in the navigation bar. This action is doable anywhere on the site as long as the User is logged in.
- New Image Modal
- Edit and delete buttons only show up on the Profile page and only on hover to achieve a clean look on the site.
- Edit Tags Modal
- Delete Image Modal
-
Navigating to a User's page (or the User page through the 'Profile' tab) displays their profile card as well as comments left by other users, or the User themselves.
-
On this page, users can add a comment, as well as delete comment they've created. The delete button displays only for comments that belong to the logged in user and appears on hover to achieve the clean look of the app.
-
In addition, there is a link to that user's uploads below their avatar picture that leads to that profile's uploads. Below the link to their collections, the user's other profile information such as their username, location, and biography are shown.
- There is a search bar at the top that can be used on any page.
- Users can search for images by putting in a tag in the search bar and any image with that specific tag will show in the results.
-
Trying to access a path that does not exist or is not available because the user is not signed in will render a page not found component, and redirects the user to the home page automatically after 10 seconds.
-
They will also have the option to return to the home page by clicking the HERE text if they do not want to wait 10 seconds.
