A standalone version of SocioLive that is completely offline and runs on a simple index.html file.
Here at Socio, one of our simplest but most engaging products is the SocioLive and its Attendee Drawing Feature. Our customers use SocioLive to visualize the engagement that is going on during their event. The attendee drawing serves as their tool to administer giveaways throughout or at the conclusion of said event. To see SocioLive in action simply click here. And by hovering your mouse to that magic wand on the left top corner you can start the Attendee Drawing. The numbers that are changing show the number of attendees that have joined the event, as well as, how many people have made connections (handshakes) with each other, and the leading industries shows the industry making the most connections!
Currently, the names in this demo Attendee Drawing are hardcoded in the Javascript code (js/live-demo.js). One of the most frequent requests that we receive from our customers is to have the ability to upload names to our Attendee Drawing through a csv (comma-separated values) file. As your take home assignment, you will simply be given this task. You will need to somehow let our customer upload a csv file into Attendee Drawing. You will be responsible for designing the front-end and back-end of it through HTML and Javascript or anything that can run in a browser.
Here you can see an example csv file that our customers will be able to use to upload names into a Attendee Drawing. You will be given the current source code that we have, but we would like to keep this assignment open ended, so feel free to rewrite the entire Attendee Drawing through a framework/language of your choice (ReactJS would be one that we would be interesting to see, but plain old Javascript or AngularJS is also good). If you decide to not use the code provided and rewrite, you do NOT need recreate any of the other parts of SocioLive, just the Attendee Drawing. Ultimately, this project is entirely yours, so think of this project as something that we would publish to thousands of people to use.
P.S. If you come up with something solid, we will publish it and thousands of people will enjoy using your creation! We recommended keeping this work you create in your public profile for other people to see. We love open source and we love collaborating!
- Fork this repository to your own personal Github. Keep it public!
- Download the repository to your computer
- We like to use Git via SourceTree. Of course, you can use command line Git, your own tools, or simply download the repository as a ZIP file
- If you are editing the code, just get started and be sure to commit your work!
- If you are rewriting the entire SocioLive Attendee Drawing, then feel free to delete all the original source code files and your put your own files into the repository and begin committing!
- Be sure to test your code using one or more examples
- Once you are done, feel free to let us know and send us link to repository or send us a pull request!
- P.S. If you want to build more than one version feel free to send them both with us!
If you have any questions, feel free to add a Github Issue on the repository. Instructions on creating an issue can be found here.
Just for reference, the repository's Github issues can be found here
js/live-demo.js- main javascript file which includes attendee drawing AND SocioLive code. Only need to pay attention to attendee drawing codeindex.html- main HTML fileexamples\simple-example-1.csv- simple CSV file that you can use to test your code and know how the an example input would look like
css/presentation/*- all the CSS files usedfont-awesome/*- the font we use on the pageimages/presentation/*- the themes and backgrounds we use throughout the websitevendor/*- third-party libraries that we use, you are NOT limited to these, feel free to choose your own and add more here!
- SublimeText - Free
- WebStorm - Free for students available here
- Git and Github - Free
- SourceTree - Free