Welcome to my message board! This project is a recreation of the same project, previously made using React. This project aims to create a simple message board/SNS on which users can create an account, make posts, and interact with one another's posts. The frontend of this project was created using Typescript, Vue (with Reactive), in a Vite environment. Styling was done using Vuetify.
- Create an account or login using existing credentials.
- Make posts which can been seen by users across the site.
- Be social by interracting with and replying to other users' posts.
- View your post and comment history in the user tab.
-
Clone this repository using the following command:
git clone https://github.com/connk95/Message-Board-Frontend---Vue.git -
Navigate to the project directory:
cd Message-Board-Frontend---Vue -
Run the app and view in your browser:
npm run start
App.vue - Contains the routing logic for the application's pages. Also contains logic for keeping the user logged in across all pages on the app.
Pages - Contains the files for each page in the app. Users are greeted with the Splash Page upon opening the app, and will have the option to create an account, login, or proceed to the home page if they are already logged in. The Home Page displays all of the posts made on the website, in order of most recent. Users can click on a post to view that post, or they can make a new post by clicking "New Post". The New Post page will prompt the user for a post title and body. The Post Page displays one post plus all of its comments, with an input box at the bottom for users to add comments. The header features a logo which allows users to navigate to the home page regardless of login status. The header also allows users to navigate to the Login Page, the Signup Page, and the User Page on which the user can view their own posts and comments, and navigate to their respective post pages. Users who are not logged in cannot make new posts or comments. The Header contains login and create account links (when not logged in), and user page and logout links (when logged in), as well as a welcome message.
Reactive Store - Contains files for both the Post store and Auth Store, both of which contain the store, actions, and types. The Ath Store stores state for authentification-related processes in the app, such as creating an account, logging in, and storing the user data after login. The Auth Actions allows for user login, persistence of user login, user logout, and create user. The Post Store stores state for the posts in the database. The post store will store all posts, or a single post with its respective comments. The Post Actions allows for fetching a single or all posts, creating a new post, and creating a new comment. The User Store & Actions allows for creating and fetching users.
- Create an account by clicking the "Create Account" button. You will be navigated to the sign up page, where you be prompted to input a username, email address, and password. For the sake of this project, you may use a fake email as it does not require varification.
- On the home page, you can create a new post by clicking the "New Post" button, or navigate to other users' posts. Let's start by making a new post.
- On the new post screen you will be prompted to enter a title and body. Once finished you may click "Submit". You will be redirected to the home page.
- By clicking on your post you navigate to the post page, where you can leave a comment.
- To view your posts and comments, you can navigate to the user page by clicking on the user icon in the top right.
- You can logout by clicking "Logout" in the top right.
Contributions to this project are welcome! If you find any bugs or have ideas for improvements, please feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.
- This project was created by Connor Ketcheson.
- Stock images are from Storyset.
Enjoy your message board experience! If you have any questions or feedback, please don't hesitate to contact us.