Client-side for group project working on an anonymous community journaling website.

1. Clone this repo using git clone
2. Enter the directory cd coderunner-client
3. Install dependencies npm install

• npm start to run the server using python http.server
• npm test to run tests contained in test/ directory
• npm run coverage to check test coverage
• npm run dev to run the server with watchify and python http.server
• npm run bundle to build a javascript bundle using browserify

This client is currently deployed at https://coderunners.netlify.app/

Build a website where users can anonymously post journal entries for other people to see, comment on and react to using emojis.

• Message character limit
• Add gifs to messages using giphy

To design the web client we first found reference material by looking for websites with a similar purpose to our project goal and then came up with layout ideas drawing from those references.

• Everyday Sexism Project 🔗
• Twitter 🔗
• Reddit 🔗
• The Guardian 🔗

• HTML
• CSS (Bootstrap 🔗)
• JavaScript
• Browserify 🔗
• Jest 🔗

Design made using Figma 🔗

• Remaining character count under message input fields.
• Sort posts by newest, oldest, most reactions.
• Searchable tags on posts containing keywords
• Can remove selected gif after selecting.

• Date display on posts showing the wrong time.
• New posts display in the wrong order.
• Sorting by oldest and newest shows posts in reverse order.
• Changing page doesn't scroll to top of page.
• Selecting a gif makes it disappear.
• Emoji reactions on single post display in reverse order.
• Posting a comment doesn't update comment count.
• Text area can be resized.
• Line breaks not showing up on posts and comments.

• Could not get the GIF previews in the search box to stack properly. The aim was for them to be tiled in a masonry style layout but it wasn't able to work in way such that elements could simply be appended and stacked automatically.
• You cannot pass the .appendChild method of an element directly into a function as the callback argument, it throws an illegal invocation error.
• Learned about new methods to make manipulating the DOM easier including Element.insertAdjacentElement and Element.replaceChild.
• An issue occurred where the JavaScript files being required were returning undefined. It turns out that the order that files are required is important for Browserify and functions cannot be required from files which require the file that it is being required from. This essentially gives the required file it's own scope in relation to the "parent".
• Putting a newline character \n into the .textContent of an element doesn't show the newline by default. The CSS property white-space: pre; must be set for those newlines to show.

• Since an API request involves two promises, to test an API fetch request it is neccessary to define a mocked fetch function that handles both promises being resolved.
• In our test suite, testing that timestamps are generated correctly can fail if run in a timezone different from GMT+0.

• The form for submitting a post doesn't reset properly after posting a message.
• Blank posts can be submitted but will be rejected by server.
• Blank comments can be posted.
• User ID number collision is still technically possible.

• Expand the search feature to not only search tags but message content.
• Have the Giphy pop-up show trending GIFs on first load.
• Live post updates so new posts can be shown without having to refresh the page.

ISC License 🔗