Welcome to the REM32!, an 500px inspired Full-Stack single-page website where you can browse photos, user profiles and add comments.
-
Front End: React, Redux
- Used to support front-end handling of images, user profiles, likes/comments and follows
- Supports the persistence of state to
local storageon uploading images to the site whether through user profile image, user cover image or a generic image post
-
Back End: Postgresql, Ruby on Rails
- Handles User Authentication via session tokens where the requests works in tandem with the front-end to log/sign the user in
- Uses a PostgreSQL database and Ruby on Rails backend to give access to the back-end server to change the database whenever needed/
-
Other: Amazon AWS S3, JavaScript
- AWS S3 handles the image hosting to allow for a more dynamic and scalability of the application as well as reducing the server load.
-
Hosting: Heroku
- The project was hosted on heroku.
New Users can sign up with a new account or try the demo user, returning users can log in. The Demo User Sign in uses a set timeout function to visualize a user login and displays both the user and password signup as if a user was actually signning in.
Check out the User Authentication Code
const demoLogin = (e) => {
e.preventDefault();
displayUsername();
};
const displayUsername = () => {
let i = 0;
const demousername = "demoUser";
const username = setInterval(() => {
setState({ username: demousername.slice(0, i + 1) });
if (i >= demousername.length - 1) {
clearInterval(username);
displayPassword();
}
i++;
}, 100);
};
const displayPassword = () => {
let j = 0;
const demopassword = "demouser";
const password = setInterval(() => {
setState({ password: demopassword.slice(0, j + 1) });
if (j >= demopassword.length - 1) {
clearInterval(password);
demoUserLogin({ username: "demoUser", password: "demouser" }).then(() => {
setState({ username: "", password: "" });
});
}
j++;
}, 100);
};
const renderDemoLogin = () => {
return (
<input
type="submit"
className="button"
onClick={demoLogin}
value="Demo User"
/>
);
};
Logged in Users can upload images to the site where the images are hosted through AWS. They can give the images a title and description and on the Image Show page they can view the image along with additional contents. The images are also filtered and organized to ensure the lastest upload appears first on the home page.
Checkout the image uploading code
const handleFile = (e) => {
e.preventDefault();
const fileReader = new FileReader();
const file = e.currentTarget.files[0];
fileReader.onloadend = () => {
setState((prevState) => {
return { ...prevState, imageFile: file };
});
setState((prevState) => {
return { ...prevState, imageUrl: fileReader.result };
});
};
if (file) {
fileReader.readAsDataURL(file);
} else {
setState({ ...state }, { imageFile: null });
setState({ ...state }, { imageUrl: null });
}
};
const handleImageSubmit = (e) => {
e.preventDefault();
const formData = new FormData();
if (state.imageFile) {
formData.append("image[title]", state.title);
formData.append("image[description]", state.description);
formData.append("image[image]", state.imageFile);
}
createImage(formData).then(() => {
history.push(`/`);
});
};Logged in Users can leave comments and likes on Images they like/see. Comments can be edited and deleted quickly while Likes can be removed/readded.
Users can view other users profile pages where they have access to images other user uploads, additionally they can follow/unfollow the user as well as viewing the user's followers and followings. Case statement method was implemented through the user navigation bar for a quick and fast time(Best: O(1) Worst: O(n)) and the state was changed based on which was clicked.
- Implement tags to help make images unique and more informative.
- Implement search functionality to enable users to search images via title, and tags.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent