Flatiron School: Phase 5 message-board-throwback
Summary: The message-board-throwback project was inspired by some of the message boards from the late 90’s/early 20’s where people could message back and forth online. The chats are sent and read essentially real time and recorded.
The project uses a React + Redux frontend and Rails API backend. React is used to dynamically change the frontend and the majority of the styling is done in CSS with a couple things taken from Bootstrap. Redux is primarily used for storing the logged in user information. The Rails API backend is used for storing the user and message information. Whenever a user is created, whether a custom signed up account or an anonymous account, it is stored in the database and has the appropriate associations so the user has many messages and a message belongs to a user.
See the various options from the home page above. The anonymous account generates an unique username for every login using uuidv4. I thought this would be a neat idea since a couple of the message boards had anonymous options and a user may want to check out the site but not commit to creating an account.
When the user selects the ‘Anon’ option, the user is prompted to continue, then the user’s anonymous ID is shown and the website continues to the message board.
The message board shows the previous messages and their respective users. The user can send a message in the message board and it’ll show up at the bottom of the list of messages. The user has the option to ‘Remove’ their message from the board if they so wish and the contents of the message will be changed to ‘[REDACTED]’. When the user is finished, they can then logout.
There are also ‘Sign Up’ and ‘Sign In’ options that allow for new account creation and for signing in to an already created account.
The ‘Sign Up’ and ‘Sign In’ options require both username and passwords and allow the user to then access the Message Board. The username is shown at the nav bar area, as seen below, and the signed in user can also remove their previous messages.
The message-board-throwback project definitely helped to round out my React + Redux experience. Creating the project from start to finish and working on the issues and bugs along the way led me to reading plenty of documentation and forms to fix the issues and better understand how to use React + Redux.
See the Github repo here.
