Giter Site home page Giter Site logo

lap1_community_page_project's Introduction

Welcome to Connekt!

Connekt is the anonymous blogging site to talk about whatever you want! Have a crazy story or a funny joke to tell? Or maybe you want to share a controversial opinion...like Harry Maguire is the best football player in the world? Then Connekt is the right platform for you! Tell others whatever you want, at a touch of a button.

Table of Contents

Installation & Usage

Installation

  • Clone or download the repo
  • Navigate to the Lap1_Community_Page_Project folder at the command line
  • Run npm install to install dependencies

Local Usage

  • Run npm start to compile the source code
  • Go in to connekt.html and start a live server for the home page
  • Navigate through the navbar for the other html pages

Deployment

Testing

  • While in the server folder within Lap1_Community_Page_Project, run npm test to launch the test suite

See the Sites

Create your own blog...

Screenshot

...or just read everybody elses!

Screenshot

Technologies used

Planning & Design Tools

HTML/CSS/JS Tools

  • Watchify

Changelog

HTML/CSS

  • init commit
  • add w3c template to all html files
  • add navbar to all html files
  • added bootsrap for the footer for connekt.html & index.html
  • add images to connekt.html
  • add blog page w/ comments
  • responsive wepages
  • emojis added to counter
  • add comments in post.html
  • style each html page
  • add functionality to hamburger menu

JavaScript

  • set up fetch requests in app.js
  • finish request to fetch all blogs
  • add gif fetch request to POST request
  • new comments print to post.html
  • set up emoji updating
  • emoji updates with server

Wins & Challenges

Wins

  • Fully responsive website working on desktop
  • Can select emojis avaliable on posts
  • Integrating the Giphy API
  • Testing at 75% coverage (client) & 82% coverage (server)
  • Sleek style to our posts

Challenges

  • Reaching test coverage over 60%
  • styling html pages thats consistent on all devices

Bugs

  • Emoji button doesn't allow two people to click on it at the same time
  • Emoji button won't count one person's like if two people press it at the same time without refreshing the page

Goals for the Future!

  • Adding a search bar to search for specific posts
  • Have a search results page
  • Add timestamp to comments
  • Show how many remaining characters there are in text area
  • add a wide variety of emojis

Minimum Viable Product

Prework

  • write this README
  • design using Lucid
  • fill Trello board

Functionality

  • anonymous posts
  • intergrate giphy api
  • view other people's entries
  • react to post with an emoji
  • comment on other people's posts

Technical

  • 60% test coverage (minimum)
  • deploys on netlify

Technologies

  • express
  • cors
  • jest -DEV
  • supertest -DEV
  • nodemon -DEV
  • jest-fetch-mock -DEV

Fun extras

  • Favicon!

Contributors to README file

  • Saamiya, Rameez, Ali & Harry

lap1_community_page_project's People

Contributors

rameez-khawaja avatar harryg15 avatar saamiya96 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.