vinitshahdeo/50daysofjavascript

#50DaysOfJavaScript — Solve one question daily to ace your next interview! Calling out participants, mentors, and communities for an open-source initiative—join us to make a difference.

#50DaysOfJavaScript

Solve one question daily to ace 🎯 your next interview!
50daysofjavascript.netlify.app

Similar to the Hactoberfest'21 initiative, we're planning another community-led open-source initiative to help the community level up their JavaScript coding skills by solving a non-trivial problem daily. None of the questions will be tricks ━ you don’t have to worry about handling big integers or knowing how to balance a red-black tree. Every problem will be based on what you do daily as a JavaScript developer.

Join #50DaysOfJavaScript ━ Solve just a single coding challenge each day to improve your JavaScript skills! This will tentatively start from Jan 20, 2024. Begin any day and stick for the next 50 days to complete the challenge. More details to follow! ✨

Learn more: 50daysofjavascript.netlify.app

Note

This repository hosts the launch website of #50DaysOfJavaScript challenge which is currently deployed on Netlify.

Quick links

Calling out participants, mentors, and communities for an open-source initiative—join us to make a difference.

• 🏄 Join as a participant
• 🍿 Become a mentor
• 🚀 Collaborate as a community

console.log('#50DaysOfJavaScript ━ Code awesome stuffs with @vinitshahdeo & friends!');

Similar initiative

A community-led initiative to help beginners get started with open-source during Hacktoberfest'21—learn more!

Local development

npm i
npm start

This is created using create-react-app and can be run locally in the development mode using the above commands. Open http://localhost:3000 to view it in your browser.

Contributors

• @yashvi2001
• @vinitshahdeo

Support

Please help us spread the registration link among your connections—tinyurl.com/50DaysOfJavaScript. For any suggestions or feedback, please hit me up on Twitter.

50daysofjavascript's Issues

Update Twitter Share Button Text

Description

We have an existing "Share on Twitter" button on our website to promote #50DaysOfJavaScript. However, we would like to update the default tweet text to make it more engaging and tailored to our initiative.

Objective

The objective of this issue is to customize the tweet text that is generated when users click the "Share on Twitter" button. This will help us effectively promote #50daysofjavascript on Twitter and encourage more engagement from the community.

Requirements

• Update the tweet text to include the hashtag #50daysofjavascript.
• Make the tweet text concise, clear, and engaging.
• Consider using compelling language that encourages users to participate in our initiative.
• Ensure that the tweet text fits within Twitter's character limit.

Note: Please share the tweet draft in this thread before raising the PR.

Thank you for your assistance in promoting #50DaysOfJavaScript!

Add Dynamic GitHub Stars and Forks Button

Enhance the #50DaysOfJavascript website by adding a dynamic button that displays the current number of GitHub stars and forks for our project repository. This will provide visitors with real-time information about the popularity of our initiative.

• Add a visually appealing button with a recognizable GitHub icon. Refer to react-github-buttons
• Our project's GitHub repository: Link to Repository
• Current website URL: 50daysofjavascript.netlify.app
• Proposed location for the GitHub button:

Note: Enhancing our website with this dynamic GitHub button will provide visitors with valuable insights into the project's popularity and encourage more community involvement.

Thank you for your contribution to improving the #50DaysOfJavascript website!

Update `manifest.json` for Progressive Web App (PWA) Integration

Context:

PWAs offer better offline functionality, improved performance, and can be installed on users' devices. Currently, it has a default manifest.json. Let's update it to make relevant PWA configuration.

• Here's the website: 50daysofjavascript.netlify.app
• Learn more about PWAs.

Proposed Changes:

• Description: Adding a description field to provide a brief overview of our website.

• Theme Color: Changing the theme color to match our branding and improve the appearance of the PWA when added to the home screen.

• Scope: Setting the scope to "/", so the PWA works for all pages of our website.

• Orientation: Specifying "portrait" as the default orientation to ensure a consistent user experience.

• Additional Icons: Adding a 512x512 icon for better quality on high-resolution devices.

[React] Revamp Landing Page for #50DaysOfJavaScript

Current State

The current landing page for 50DaysOfJavaScript needs a significant overhaul. It should be transformed into a single-page application (SPA) with clear Calls to Action (CTAs) to encourage visitors to join as participants, mentors, and community members.

Proposed Changes

• Revamp the existing landing page into a single-page application to provide a seamless and interactive user experience.

• CTAs for User Engagement: Incorporate prominent and visually appealing CTAs that guide visitors to join as participants, mentors, or become a part of the community.

• Initiative Overview: Include a concise description of the initiative, emphasizing that it is a community-led open-source effort aimed at helping individuals enhance their JavaScript coding skills. Ensure that it conveys the message that the daily coding challenges are practical and relevant to the everyday tasks of JavaScript developers.

• Link to Join: Provide a clear and accessible link for users to join #50DaysOfJavaScript. This link can be placed prominently within the initiative's overview section.

• Social Media Sharing: Add an option in the footer to allow users to easily share the initiative on Twitter. This can help increase the visibility of the initiative among potential participants.

Additional Information

The landing page should be designed with user-friendliness and engagement in mind. It should effectively communicate the value and purpose of the initiative, making it enticing for visitors to get involved.

Related Links

• Join #50DaysOfJavaScript
• Landing Page

Note

Please share the UI mocks in this issue thread before starting the development.

Design Logo for #50DaysOfJavascript

Description

We are in need of a distinctive and creative logo for #50DaysOfJavaScript, our community-driven open-source initiative. This logo will serve multiple purposes, including being used as a favicon for our website and featured prominently on promotional posters.

Objective

The objective of this issue is to commission the design of a versatile logo that embodies the spirit of #50DaysOfJavaScript and can be effectively used in various contexts, such as on our website, in social media posts, and on printed promotional materials.

Design Requirements

• The logo should prominently feature the text "#50DaysOfJavaScript" in a clear and stylish font.
• It should incorporate visual elements that represent JavaScript or coding, such as code snippets, JavaScript-related icons, or programming symbols.
• The design should be scalable and suitable for various sizes, from a small favicon to a larger poster.
• Use a color scheme that is visually appealing and aligns with the overall theme of the initiative.

Additional Information

• Website URL (for favicon): 50daysofjavascript.netlify.app
• Planned use for posters and promotional materials.

Note: Your creativity is highly valued, and your design will be an integral part of our project's identity. We appreciate your contribution to making #50DaysOfJavaScript visually appealing and memorable.

Thank you.

Make it responsive

The mobile view and larger desktop view are messed up, please make it responsive.

Thumbnail (OG image) is not appearing in WhatsApp chats

While sharing the link (https://50daysofjavascript.netlify.app/) on WhatsApp, the thumbnail doesn't appear. Please refer to the related StackOverflow thread for the same.

Design an OG image for the launch website of #50DaysOfJavaScript

Description

#50DaysOfJavaScript is an open-source initiative focused on elevating JavaScript skills through daily, practical coding challenges tailored to real-world tasks. As we prepare to launch the website for this initiative, we need a visually appealing OG (Open Graph) image that represents our community-driven project.

Objective

The OG image will be used when sharing our website link on social media platforms, providing an eye-catching visual representation of what our initiative is all about. Here's the link to the website — 50daysofjavascript.netlify.app

Design Requirements

• The OG image should visually convey the theme of JavaScript coding challenges.
• It should include the project name "50DaysOfJavaScript."
• The image should be engaging and professional, reflecting our commitment to quality.
• Consider incorporating elements like JavaScript code snippets, coding tools, and/or community aspects.
• The image should have the recommended dimensions for OG images (e.g., 1200x630 pixels).

Additional Links

• Learn more about OG protocol.
• What is Open Graph and how can I use it for my website?

Note: Your contributions will be credited, and we highly value your creative input! Please share your designs in this thread first before raising the PR.

Thank you for your support! ❤️

TypoError in Google form:- Contest Start date is showing 20th jan 2023