CollabWebApp's profile picture. We're a team of #codenewbies building a decision-maker app with Next.js and GraphQL
We're an open source community made for learning and teaching
Join Us!

Collab

@CollabWebApp

We're a team of #codenewbies building a decision-maker app with Next.js and GraphQL We're an open source community made for learning and teaching Join Us!

Our useRouter() function parses the URL and extracts the room ID. Then we use the ID to query the database. If the room exists, the room data is returned, with which we create a voting room 🥳 #100DaysOfCode #graphQL #CodeNewbie

CollabWebApp's tweet image. Our useRouter() function parses the URL and extracts the room ID. Then we use the ID to query the database. If the room exists, the room data is returned, with which we create a voting room 🥳 #100DaysOfCode #graphQL #CodeNewbie

Our emails are sent through the front-end, rather than the back-end, with help from the #emailJS library 📖. It transforms our contact form into an email that sends to our gmail when submitted! #CodeNewbies #100DaysOfCode


Why we love #FaunaDB: It's easier to request data! Rather than using a database reference to request information and then search through ALL the associated data, you can prepackage queries and instructions into your own indices and functions. #100DaysofCode #CodeNewbies 👩‍💻


We're using #Apollo 🚀 to work with GraphQL. With Apollo server and client, we can use the same library for the front and back-end -- serving and requesting data in the same way. #100DaysOfCode #CodeNewbie

CollabWebApp's tweet image. We're using #Apollo 🚀 to work with GraphQL. With Apollo server and client, we can use the same library for the front and back-end -- serving and requesting data in the same way. #100DaysOfCode #CodeNewbie

With #GraphQL, we can specify what pieces of data we want back from our #API, rather than receiving the contents of entire objects like with traditional APIs. #100DaysOfCode #CodeNewbie


Check out some of our early styling work: a smooth gradient transition on buttons, based off of our #Figma wireframe mockup. Our projects are broken down into smaller tasks so as to accommodate participants of any level. #CodeNewbie #100DaysOfCode

CollabWebApp's tweet image. Check out some of our early styling work: a smooth gradient transition on buttons, based off of our #Figma wireframe mockup. Our projects are broken down into smaller tasks so as to accommodate participants of any level. #CodeNewbie #100DaysOfCode

#Backend challenge: Keeping our code organized, while adhering to #GraphQL 's two-file system. Solution: Import smaller files into #resolvers route or #schemas route, where they are stitched together. #100DaysOfCode #CodeNewbie

CollabWebApp's tweet image. #Backend challenge: Keeping our code organized, while adhering to #GraphQL 's two-file system. Solution: Import smaller files into #resolvers route or #schemas route, where they are stitched together. #100DaysOfCode #CodeNewbie

Improved testing! Our graphqlTestCall helper function allows the schema to run outside of the browser, so that we can automatically test any query with #Jest. #GraphQL #CodeNewbie #100DaysOfCode

CollabWebApp's tweet image. Improved testing! Our graphqlTestCall helper function allows the schema to run outside of the browser, so that we can automatically test any query with #Jest. #GraphQL #CodeNewbie #100DaysOfCode

We experimented with Figma to collaborate on our wireframe mockup. You can drag-and-drop components, and copy the CSS for your code! #CodeNewbie #100DaysOfCode

CollabWebApp's tweet image. We experimented with Figma to collaborate on our wireframe mockup. You can drag-and-drop components, and copy the CSS for your code! #CodeNewbie #100DaysOfCode

To keep the voting anonymous , we've created a name-generator that pairs animal names with adjectives. Keep shuffling until you feel inspired! #CodeNewbie #100DaysOfCode


Our Collab-ers are making progress on our MVP this holiday season. We've merged the front-end and back-end, improved testing, and started on styling.

CollabWebApp's tweet image. Our Collab-ers are making progress on our MVP this holiday season. We've merged the front-end and back-end, improved testing, and started on styling.

A circular progress bar animation will display the countdown as users place their votes. Here is a snippet of @fabian_carlos_ 's code that aligns the animation with the seconds counting down.

CollabWebApp's tweet image. A circular progress bar animation will display the countdown as users place their votes.  Here is a snippet of @fabian_carlos_ 's code that aligns the animation with the seconds counting down.

Nathalie made this Wow! GIF with Adobe Photoshop. It might be featured on our final page, where the results of the vote are revealed.


United States Trends

Loading...

Something went wrong.


Something went wrong.