JigSaw

Practice programming and congregate with code

Comment 3

JigSaw Contributors

Izaan Ibrahim
Akarsh Ojha
Jayant Patil
Adrian Zhang

Inspiration

We wanted to test our JavaScript and general programming abilities, so we decided to build a website serving this exact purpose. This website allows you to create and share your own coding challenges to share with anyone on the website.

What it does

JigSaw is a coding challenge website. You can submit your own challenges through a form interface utilizing markup formatting and JSON data. You can then answer others' challenges through an intuitive editor along with a console. In addition, you can choose to submit your solution for fellow programmers to view.

How we built it

We used JavaScript, HTML, CSS, Node.js (express module, cookie parser, etc...), libraries, such as Marked and CodeMirror, and finally SQLite3 as a database.The site is written mostly on JavaScript. The server-side is built on Express, and exposes a RESTful API that the client uses to retrieve information. We used both hypertext generation and client-side code to create a rich experience for the end user, enhanced by the addition of features such as a smart editor powered by CodeMirror.

Challenges we ran into

Some open source libraries and modules that we used, such as CodeMirror, cookie parser, and Marked, were unfamiliar to us as we have not integrated them into a project prior to this hackathon. Front end development also stood as a challenge since we held little to no experience with front end development and UI design. In addition, our sizeable backend necessitated the use of concepts including a server database and a custom API to handle authentication, running user code, and getting content from the site.

Accomplishments that we're proud of

We were able to make our own API, which could handle requests to the server as well as manage to create a polished and professional looking website. Furthermore, our website is lightweight and modular, meaning that we can switch to different databases while maintaining high performace.

What we learned

We learned how to program the front end of a webpage effectively and efficiently with templates to dynamically generate HTML. We also learned server architecture with Node, how to use custom API's for our own system, and how to integrate a database with a website. Utilizing open source libraries proved to be a new, useful skill we can employ in the future.

What's next for JigSaw

  • Comments sections underneath challenges for feedback towards the author or for others to share their ideas and approaches
  • Implementing more languages to practice and create challenges for (C, C++, Python, Java, etc...)
  • Add a forum section
  • Add the ability to delete your created challenges
  • Add a reporting feature to reprimand those who do not follow guidelines (i.e. inserting the wrong parameters) as well as moderation
  • Achievements
  • XP Progress Bar + levels
  • Search Engine Optimization to our domain
  • Search feature to find specific challenges or users
  • Add the ability to change user aspects, such as profile pictures, usernames, passwords, bio's, etc...
  • Add tags and interests to easily recommend users with challenges they would find interesting
Share this project:

Updates