Project: Gossip-Girl-xoxo

📝 🚀 ⚖️

https://gossip-girl-xoxo.netlify.app/

A Gossip Girl inspired app with client and server integration where users can post entries of up to 300 characters and a gif. Users can engage with the content using reactions and comments.

Description

XOXO is an anonymous community journaling website aimed at teenagers and high school students based on hit tv series Gossip Girls. With growing privacy concerns on current social media platforms and messaging apps, XOXO aims to provide a safe space for individuals to freely share their thoughts without having to worry about having their identity exposed.

Installation & usage

Installation

Clone or download the repo.

Usage

Open the terminal:
cd server npm install
Navigate to index.js
Start the server npm run start // currently starts nodemon, remember to switch to node index.js

In a seperate terminal:
cd ../client
npm install
open index.html

Technologies

• HTML, CSS, JavaScript

Dependencies:

• Server: cors, moment, body-parser, express

• Client: giphy/js-components, giphy/js-fetch-api

DevDependencies:

• Server: jest, supertest, nodemon

• Client: watchify, concurrently, jest, jest-fetch-mock, coverage

Process

1. Start by planning out a plan!!! Use of GitHub Projects to set up a Kanban board and a 'Source of Truth' shared document on Google Docs.
2. Create Figma design plan.
3. Create server side folder and client side folder with testing and relevant pages.
4. Peer coding, drive and navigation, and splitting up tasks.

Bugs

• Deployment issues
• Posts not showing when sent from mobile devices.
• Submit button not closing text area
• Styling
• Comment submit button not functioning
• Comment submit button can be pressed multiple times and each click will bring up new comment textarea
• Date and time

Changelog

Server-side

1. Create tests and download necessary packages
2. Set up server to connect with local host and create root/routes
3. Add api testing and model testing
4. Originally planned to use Bootstrap but due to issue with color customisation, decided not to proceed with using Bootstrap as it doesn't seem worth the hassle
5. Deploy to Heroku
6. Date and time to show relative time rather than time of post
7. Sort by hot (most reactions) or sort by new posts.
8. Add routes for sorting posts by time and by reaction count
9. Increase testing coverage
10. Add error handling and error messages

Client-side

1. Download necessary packages
2. Deploy to Netlify
3. Add layout testing, DOM testing and mock testing
4. Create skeleton of page, add basic functionality, basic styling
5. Add Giphy carousel to post area
6. Add comment textarea and submit button within post, emoji reaction ability and reaction counter
7. Function to pick random font for each entry
8. Dark mode
9. Share button to copy link of post
10. Add labels for if there are no comments, one comment, or multiple comments on a post
11. Remove giphy functionality (user can cancel add giphy)
12. Add About page which links to and from homepage

Wins & Challenges

Wins

• Discovered how to deploy to Heroku and Netlify from same repository and same branch. Must change path directory if 'index.html' and 'Procfile' are not in the root.
• Connected API to front end!
• Having a functioning and visually appealing page that looks amazing on most popular smart phones.
• Meeting our own deadlines
• Hot or New sorting! (See code snippet below)

Challenges

• Finding the best strategy to deploy on Heroku and Netlify from the same repository on Github.
• Git flow
• Bootstrap issues - not able to edit colors
• Selecting and posting Giphy
• Testing Giphy functions
• Organisation of functions not set out well for testing

Future Features

• Reply with a Giphy in comments
• Save favourite posts
• Order by user's favourite posts
• Choose from more selection of emojis as a reaction
• Ability to search through posts
• Report other posts (e.g if not appropriate)