Virtual-Bulletin
Description
Use this app as a hub for research materials that you wish to share with a group or just keep in one location. Users are given the option to create groups and invite others to join. From there, a user can create bulletins to share with that group. Posts can be made to those bulletins the same way you would in the real world!
This is a full stack application built using Handlebars as a templating engine, Express to route, Sequelize as the ORM, and Bulma as a CSS framework. Passwords are encyrpted using the bcrypt npm package.
To use the live app, simply follow the above link and create an account!
If you’d like to clone the repository and set it up for yourself, follow the directions below.
Installation
- Clone this repository to receive all of the files
- Set up your environment variables in a .env file
- Run “npm install” in the command line of your terminal to set up all of the dependencies
- Initialize your database by running the “schema.sql” file with MySQL
- There is no seed data provided for this app
- Run “npm start” to start the application’s connection
- Go to the url of the application (http//:localhost:3001) and you’ll see it running
Using the app
Create an account
Once you have the app running, you must first create an account. Your email won’t be used for anything other than to uniquely identify you and send group invites. Once you have created an account, you will be brought to your dashboard.
Personal Dashboard
This dashboard is your own personal hub that holds records of any groups you belong to and bulletins you have access to. Clicking on any of the group or bulletin tags will navigate you to the corresponding page.
This is also where you can create your first group! You will need to create one before making any bulletins. When creating a bulletin, you will need to also submit a group that you’d like it to belong to.
Group Dashboard
This is the dashboard that is shared with a group. Each group dashboard has options to create bulletins, invite members, and check group settings. You can also navigate to any of the group’s bulletins from this page as well as see what role each member holds.
This is what an invitation will look like in someone’s dashboard.
Bulletin board
The bulletin board itself is the main attraction for this application. Users can place notes on the bulletin board in a similar way they would in person. Links and images can be attached to the posts. Posts can also be edited and deleted.
Future Development
There are responsiveness concerns with this application. The glaring issue is that the bulletin itself isn’t mobile-friendly. That being said, it was never meant to be. This is supposed to replicate how someone would interact with a real bulletin board. Bulletin boards are supposed to be wide. When using one, you typically don’t look at the whole thing at once. Instead, you are more likely to be “zoomed in” on certain parts of the bulletin. I’m not sure if anything should be done about this, but I wanted to address it here for reference.
As of April 14th, 2022, there are still many odds and ends that can be tied up to clean things up. One of which is ensuring users have the option to leave/delete groups, as well as removing bulletins when they’re defunct or otherwise unused. A large poriton of the routes are in place for this, so it would mostly be work done on the FE.
Adding a chat box and/or messaging system would be helpful for this application and was in the original idea.
The position of cards can be adjusted by clicking the board when in edit mode, however, this isn’t the best user experience. Future development could be to make this drag-and-drop process smoother.
If I were to work on this project again, I’d consider converting it to use the MERN stack with TailwindCSS and NextJS as supporting frameworks.