Latest version: https://git.chalmers.se/courses/dit342/group-00-web
This template refers to itself as group-00-web
. In your project, use your group number in place of 00
.
File | Purpose | What you do? |
---|---|---|
server/ |
Backend server code | All your server code |
server/README.md | Everything about the server | READ ME carefully! |
client/ |
Frontend client code | All your client code |
client/README.md | Everything about the client | READ ME carefully! |
docs/LOCAL_DEPLOYMENT.md | Local production deployment | Deploy your app local in production mode |
The version numbers in brackets indicate the tested versions but feel free to use more recent versions. You can also use alternative tools if you know how to configure them (e.g., Firefox instead of Chrome).
git config --global user.name "YOUR_USERNAME"
=> check git config --global user.name
git config --global user.email "email@example.com"
=> check git config --global user.email
Windows users: We recommend to use the Git Bash shell from your Git installation or the Bash shell from the Windows Subsystem for Linux to run all shell commands for this project.
ssh-keygen -t ed25519 -C "email@example.com"
(skip if you already have one)git clone git@git.chalmers.se:courses/dit342/group-00-web.git
# Clone repository
git clone git@git.chalmers.se:courses/dit342/group-00-web.git
# Change into the directory
cd group-00-web
# Setup backend
cd server && npm install
npm run dev
# Setup frontend
cd client && npm install
npm run serve
Check out the detailed instructions for backend and frontend.
Open the server
and client
in separate VSCode workspaces or open the combined backend-frontend.code-workspace. Otherwise, workspace-specific settings don't work properly.
𝕐 is a social media platform where users share short posts, containing text and optionally images. It can be used for sharing thoughts and media (images). People follow each other to see posts in their feed, and can like, repost, or reply to posts to engage in discussions.
Authentication: This includes pages for login, registering and restoring accounts. Users will be able to login using their username and password. To register a new user will need to fill out their username, password, name, e-mail and birthday. Furthermore, users can recover lost accounts by resetting their passwords using the e-mail address associated with their account.
Home: Home page is the primary source of content on the platform. It provides infinetely scrolling feeds, both for activity from people you follow and general Y activity. This is also the place to go if you want to post something new.
Thread: When an individual post or comment is opened, the item's content is shown at the top of the page, followed by the comment thread. Each post and comment can be replied to and liked. Threads can be unwound both ways, and depeneding on who is viewing, change layout (e.g. original poster can edit their own posts and comments)
Profile: On this page a user can view any profile on the platform, whether it's someone else’s or their own. At the top of the page the user’s information (such as name, profile picture, about section, etc.) is displayed. If the user is viewing their own profile, they can edit their information. Below the info section, the user’s posts, as well as re-posts and comments are put into a feed in chronological order (newest first). The profile feed has the same functionality as the home feed (liking, commenting, reposting). The user can also follow another user on this page.
Discover: This is the platform's search page. On desktop, it takes the form of a persistent side-bar; on mobile, it becomes its own tab in the navigation. Discover provides suggestions on who to follow and allows users to easily find old friends, or get in touch with anyone else on the platform.
Our advanced feature is feed generation. Each user will have a personalized feed generated based on their followings, accessible on the homepage under ‘Feed’ tab. The feed is composed on the server side. On the backend, the feature has its own endpoint (‘api/v1/feeds’) that returns the most recent posts from people you are following, sorted chronologically. Furthermore, the endpoint also supports descendent sorting and pagination.
On frontend, the feed is the central part of the website, infinitely scrollable, without the need for users to switch pages manually. More data provided through HATEOAS queries is loaded once the user reaches the end of the scrollable list. With this, loading is more efficient for larger lists, as the client requests only parts of the feed, not the whole.
Additionally, alongside the ‘Feed’ tab, there is a ‘Recents’ tab providing fresh posts from all platform's users (followed or not) through the same infinite scrolling list functionality described above.