Code Monkey home page Code Monkey logo

whim's Introduction

whim

A text channel based chat application for collaboration and brainstorming.

app img

Try the demo here

Features

  • Create impulses -- these are text channels that anyone can create. Share the link to let others join!
  • Skip creating an account -- No signup required. Simply create or join an impulse to start chatting.
  • Anonymous sparks -- these are anonymous identities that represent you in each impulse. If you wish to persist an impulse beyond the current browser session, create an account and link the spark to it.
  • Post inspirations -- create a note that encapsulates an idea, problem, task, or anything really. Each one spawns a thread of it's own and can be revised, so everyone in the impulse can contribute to the idea.

Inspiration/Goals

I began work on this project to practice creating a webapp from scratch -- taking an idea from conception to reality. For the last few months, I've been learning Rails as a backend framework and wanted to dabble in frontend development as well. And so I chose to pick up react and learn how to make the two click.

As for what to make, I thought it'd be cool to recreate an instant messaging app, much like Slack, Discord, or Messenger, since these are tools I commonly use to organize groups for projects, etc. However, it's a hassle when not everyone uses the same platform -- some people have accounts for one while others don't. And so I wanted to make something that didn't require signup, letting everyone join instantly. Following the collaborative theme, I added the ability to create "inspirations". I often scribble down my thoughts on sticky notes, usually for ideas, tasks, or reminders. And so I thought it'd be useful to have a disposable, virtual note that everyone can see. Inspirations thus serve as a "shared" sticky note: something to communicate ideas with, no matter how simple or complex.

How to use

Start by creating an impulse.

how to create impulse

Then, create a spark. Give yourself a unique name that others see you as.

how to create spark

Start chatting!

Create inspirations by clicking the inspiration button when submitting a message.

create inspiration

New inspirations show up here

inspiration list

Click on one to enlarge it. Notice that the thread changed. Messages sent now are under this inspiration's thread. Click the impulse on the left sidebar to re-open the impulse thread.

Built With

  • Front-end: React/Redux
  • Back-end: Rails API
  • Hosting: Heroku
  • Vanilla CSS

Running locally

Setting up frontend

  1. Install nodejs/npm
  2. Clone this repo
  3. Run npm i inside the repo to install module dependancies
  4. Modify package.json to run the server on the desired port
  5. Update API_ROOT and API_WS_ROOT in src/constants/index.js to match your backend server enpoint

Setting up backend

  1. Install ruby, Rails, and postgreSQL
  2. Clone the backend API repo here
  3. Fill out config/application.yml with details for postgreSQL and ActionMailer
  4. Inside the repo, run bundle install

TODO list

  • Switch to using cookies for authentication. JWT tokens are currently being store in localStorage
  • Message deletion
  • Impulse deletion
  • Mobile support (responsive CSS)

Contributing

If you there's any bugs, questions, or suggestions, let me know! Submit a pull request if you wish as well. I'm always looking to improve this project.

Authors

whim's People

Contributors

xianhaic avatar jsungg avatar

Watchers

James Cloos avatar  avatar

Forkers

jsungg

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.