[Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! #2621

Saeris · 2019-10-03T06:29:13Z

Update 2: Thanks everyone who participated! We're asking that no one open any additional PRs at this point for Hacktoberfest. We've still got a lot of submissions to review and merge before the 31st and we'd like to make sure that everyone who contributed gets credited for their work.

Update: We've received a ton of submissions from this and we're really grateful to everyone who's participated this year! As you may have noticed, we're a bit behind on merging your PRs and updating the list of components to be refactored. This week we're going to go through all the remaining open PRs in order of submission and either request changes or merge them. Going forward, we're sticking with the first-come first-served approach, meaning any duplicate submissions will simply be closed. If you're still considering making a contribution, you can up your chances of getting your PR merged if you can make sure someone else hasn't beaten you to that part of the code base by searching through all of the Hacktoberfest PRs first.

Hey everyone! As you might already know, this month is #Hacktoberfest, which is an event that encourages people (especially newcomers) to participate in open source development. Since CodeSandbox's client is an open source project, we thought it would be a good idea to throw together a small guide on how you can make some quick contributions and rack up those PRs.

Right now we're working on overhauling the code base to transition everything to Typescript and replace our old state management solution (Cerebral) with Overmind (both developed by our own @christianalfoni). We're at a point where a lot of the groundwork for these big refactors has been done, and now all that's left is to implement changes across the application. We've come up with some patterns and best practices around how to do this, which we'll explain below.

About the Event

But first let's quickly go over Hacktoberfest and how you can use this issue as a guide to participating in the event. Here are the rules as explained on the official website:

Event details

Hacktoberfest® is open to everyone in our global community. Whether you’re a developer, student learning to code, event host, or company of any size, you can help drive growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to complete the challenge.

Hacktoberfest is open to everyone in our global community!
Pull requests can be made in any GitHub-hosted repositories/projects.
Sign up anytime between October 1 and October 31.

Rules

To qualify for the official limited edition Hacktoberfest shirt, you must register and make four pull requests (PRs) between October 1-31 (in any time zone). PRs can be made to any public repo on GitHub, not only the ones with issues labeled Hacktoberfest. If a maintainer reports your pull request as spam or behavior not in line with the project’s code of conduct, you will be ineligible to participate. This year, the first 50,000 participants who successfully complete the challenge will earn a T-shirt.

To help you get started, we've put together a list of components that still need to be refactored to use Overmind. We'd ask that you please choose up to 4 components from this list and create separate PRs for each. You can reply to this issue to let other participants know which components you plan on refactoring (and using your comment, we'll mark who's doing what on the list to help people choose). We'd like to make it so as many people as would like to be able to participate in the event, so that's why we would appreciate a maximum of 4 contributions per person.

Contributing

First, if you've never contributed to CodeSandbox before, we'd recommend you check out our Contributing Guide which covers some basics to help you get started running the project locally and how to submit your code.

To make a Hacktoberfest contribution, please create a new PR with:

The component name your PR refactors
Add the 🔨 Refactor, 🧠 Overmind, and most importantly the Hacktoberfest labels
Request a review from @Saeris and @christianalfoni so that we can make sure your PR gets merged

Important! Your PR has to have the Hacktoberfest label such as in the screenshot above for it to count towards your 4 PRs! And don't forget to signup on the event homepage: https://hacktoberfest.digitalocean.com/profile

Hacktoberfest is an event run by a third party organization, so you have to follow their rules in order for your work to count towards a T-shirt!

For the refactor itself, in some cases it's really rather simple. Many of our components have already been re-written as functional components which use React hooks (in some cases, a component may need to be additionally refactored from a class component to a functional component). As part of our transition from Cerebral, we used to some glue code in our initial tests, which follow a pattern similar to this:

import { Button } from '@codesandbox/common/lib/components/Button';
import Input from '@codesandbox/common/lib/components/Input';
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
import track from '@codesandbox/common/lib/utils/analytics';
import { inject, hooksObserver } from 'app/componentConnectors';
import React from 'react';

import {
  WorkspaceSubtitle,
  WorkspaceInputContainer,
} from 'app/pages/Sandbox/Editor/Workspace/elements';

import { Error } from './elements';

type Props = {
  style?: React.CSSProperties;
  store: any;
  signals: any;
};
export const CreateRepo = inject('store', 'signals')(
  hooksObserver(
    ({
      style,
      signals: {
        git: { repoTitleChanged, createRepoClicked },
      },
      store: {
        editor: { isAllModulesSynced },
        git: { repoTitle, error },
      },
    }: Props) => {
      const updateRepoTitle = ({
        target: { value: title },
      }: React.ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });
      const createRepo = () => {
        track('Export to GitHub Clicked');
        createRepoClicked();
      };

      return (
        <div style={style}>
          {!isAllModulesSynced && (
            <Error>Save your files first before exporting.</Error>
          )}

          {error && <Error>{error}</Error>}

          <WorkspaceSubtitle>Repository Name</WorkspaceSubtitle>

          <WorkspaceInputContainer>
            <Input onChange={updateRepoTitle} value={repoTitle} />
          </WorkspaceInputContainer>

          <Margin horizontal={1} bottom={1}>
            <Button
              block
              disabled={error || !repoTitle || !isAllModulesSynced}
              onClick={createRepo}
              small
            >
              Create Repository
            </Button>
          </Margin>
        </div>
      );
    }
  )
);

To this:

import { Button } from '@codesandbox/common/lib/components/Button';
import Input from '@codesandbox/common/lib/components/Input';
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
import track from '@codesandbox/common/lib/utils/analytics';
import { useOvermind } from 'app/overmind';
import React from 'react';
import {
  WorkspaceSubtitle,
  WorkspaceInputContainer,
} from 'app/pages/Sandbox/Editor/Workspace/elements';
import { Error } from './elements';

interface ICreateRepoProps {
  style?: React.CSSProperties;
}

export const CreateRepo: React.FC<ICreateRepoProps> = ({ style }) => {
  const {
    state: {
      editor: { isAllModulesSynced },
      git: { repoTitle, error },
    },
    actions: {
      git: { repoTitleChanged, createRepoClicked },
    },
  } = useOvermind();

  const updateRepoTitle = ({
    target: { value: title },
  }: React.ChangeEvent<HTMLInputElement>) => repoTitleChanged({ title });

  const createRepo = () => {
    track('Export to GitHub Clicked');
    createRepoClicked();
  };

  return (
    <div style={style}>
      {!isAllModulesSynced && (
        <Error>Save your files first before exporting.</Error>
      )}

      {error && <Error>{error}</Error>}

      <WorkspaceSubtitle>Repository Name</WorkspaceSubtitle>

      <WorkspaceInputContainer>
        <Input onChange={updateRepoTitle} value={repoTitle} />
      </WorkspaceInputContainer>

      <Margin horizontal={1} bottom={1}>
        <Button
          block
          disabled={Boolean(error || !repoTitle || !isAllModulesSynced)}
          onClick={createRepo}
          small
        >
          Create Repository
        </Button>
      </Margin>
    </div>
  );
};

Please take note how we were previously using the inject and hooksObserver higher order components to pass store and signals as props to the component. Those get replaced with a new useOvermind hook that returns an object containing the keys state and actions which are synonymous with store and signals. In most cases these simply need to be swapped out as in the example above (which also includes some extra tidying of types and code style changes).

One of the greatest benefits of this refactor is that Overmind now provides us full Typescript support for our global state management. However that does mean that in some cases there may be type errors that also need to be resolved. To go about resolving these, you may need to do one or more of a few things:

Update the type definitions for the state itself (found under app/overmind/namespaces)
Fix outdated or missing prop types for related components
Or something more tricky is going on that we may need to help you with

What I've found is that this guide is a great resource for learning how to write types for React applications. I first check that before hitting up Google and StackOverflow for answers to type errors I encounter. Typescript can be a little difficult, but for the most part this refactor doesn't involve any of the really advanced Typescript wizardry.

So to summarize:

You may need to refactor the component to a functional component (choose a different component if this seems to daunting!)
Follow our coding style guide (explained below) to implement best practices
The inject and observer/hooksObserver are to be removed, also remove the import at the top of the file
Introduce the useOvermind hook from app/overmind import:

import { useOvermind } from 'app/overmind'

Destructure the state and/or actions from the hook:

const SomeComponent: React.FunctionComponent = ({ store: { someState }, signals: { someTrigger } }) => {
  const { state, actions } = useOvermind()
}

Use the existing store and/or signals and convert that into state and/or actions

const SomeComponent: React.FunctionComponent = () => {
  const { state: { someState }, actions: { someTrigger } } = useOvermind()
}

Run yarn typecheck and yarn lint, fix any errors that crop up (warnings can be ignored)
If you know where the component is used in the app, try manually testing it to check that it still works
Submit your PR for review
Implement any requested changes

Components to be refactored:

Best Practices and Style Guide

We've been working on a set of coding guidelines that we're applying across the project to increase readability and consistency. While not hard rules, we'd ask that you stick to these a close as possible. Since these are mostly stylistic choices, they're unlikely to cause anything to break if not followed, but we may ask you to fix a few if we feel it's important.

Always use Named Exports (here's some good reasons why this is a good idea: https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/)
Write functional components with hooks (makes it much easier to detect unused methods, among numerous other good reasons)
Prefer arrow functions (death to this)
Prefer destructuring to property accessors
Components should always be their own file with a Capitalized name matching the component name
Multiple file components should be in a Capitalized folder matching the component name, with an index.ts file handling all exports to be consumed by outside components
Prefer interface over type for typing Props
In general, prop interfaces should follow a IComponentNameProps naming scheme, though this is largely stylistic
Prefer const SomeComponent: React.FC<ISomeComponentProps> = ({ . . . }) => { } over const SomeComponent = ({ . . . }: ISomeComponentProps) => { } to avoid needing to define common React component props
For styled components, Inline types are fine where their footprint is small, ie:

const SomeElement = styled.div<{ large: boolean }>` 
  ${({ large }) => css`
    /* 
    Always wrap style declarations in a single function call and don't forget to
    use "css" for syntax highlighting!
    */
  `}
`

All type interface definitions should live in a types.ts file adjacent to the component to reduce clutter in the component definition
If a component uses GraphQL queries/mutations, all GraphQL documents should live in their files adjacent to the component that uses them, ie: queries.gql and mutations.gql to reduce clutter in the component definition
All styles should be applied with styled-components and all styled elements should be defined in elements.js to reduce clutter in the component definition
Global styles should be defined using styled-components in a GlobalStyles.ts file adjacent to the root component that requires it
When using props in styled components, always wrap all of the styles in a single arrow function to make it easy to destructure props all in one place and always wrap nested template literals with the css tagged template to enable style linting/syntax highlighting.
Style rules should be well ordered (to be enforced by stylelint at a later date). In general this means rules should be grouped by category, starting with Position > Box Model > Fonts > Animation > Misc > pseudo-selectors. For now this is low-priority.

In general, our component file structure looks like this:

./ ParentComponent
  ./ ChildComponent
    - index.ts
    - ChildComponent.tsx
    - elements.ts
  - SomeOtherChildComponent.tsx
  - index.ts
  - ParentComponent.tsx
  - elements.ts
  - types.ts
  - queries.gql
  - mutations.gql

Simple components (those without any styles, few types, and no grapql) live in single named files like SomeOtherChildComponent.tsx, while others live in their own directories with folder names that match the main component's name, using index.ts to define all exports to be exposed to all outside consumers up the tree and files such as elements.ts to handle concerns like component styling, shared type definitions, graphql queries/mutations, etc.

Many of our existing components just live in their own directory and are defined in the index.js file there. If you encounter one of these, it's best to split it up according the the rules defined in the style guide. If it's a simple component, you can just rename the file to the component's name and move it to the parent directory, getting rid of the folder it's in entirely.

If you're confused by any of these, just try your best and we'll point out any changes we'd like you to make when we review your PR! Don't be afraid to as us questions too!

Other Quick Wins

So while Overmind is the main focus of our current refactor, we're also looking to convert more of the code base over to Typescript and React Hooks. If you'd like to try and refactor any of our JavaScript files or convert a class component, you're more than welcome to do so! We don't have a convenient list of files that need to be refactored for those, but it shouldn't be too hard to find.

In general we could always use contributions like bug fixes and better documentation, so if you spot an issue you'd like to try and fix or something in our docs has a typo or isn't clear enough, please feel free to submit a PR for those too!

Thanks and Happy Hacking!

Lastly, we'd like to extend our sincerest thanks to our community for all the feedback and support you give us! The entire CodeSandbox team is driven by your enthusiasm and we're always on the lookout for new ways to collaborate together and build new features to address all the awesome use-cases you come up with for our app. Thanks so much for your time and effort!

The text was updated successfully, but these errors were encountered:

jyash97 · 2019-10-03T08:55:25Z

This is really awesome 🎉

I would like to work on: /app/pages/common/Navigation/index.tsx as I have recently seen a re-render issue with the Overlay Modal in Notifications may be changing to overmind may fix that issue as well.

ShahAnuj2610 · 2019-10-03T09:10:19Z

I would like to refactor /app/pages/common/Modals/FeedbackModal/Feedback.js &&
/app/pages/common/Modals/FeedbackModal/index.js

indifferentghost · 2019-10-03T12:27:23Z

#2623 is an open PR for the refactor of /app/pages/CLI/index.tsx

hauze-v · 2019-10-03T15:28:28Z

Hello, I will be working to refactor:
/app/pages/common/Modals/EmptyTrash/index.js

chinmayhem · 2019-10-03T17:11:52Z

Hey! PR #2630 refactors app/pages/index.tsx
Thank you! :)

vanya829 · 2019-10-03T19:22:38Z

Hi. I'd like to refactor this one /app/pages/common/LikeHeart/index.tsx

chinmayhem · 2019-10-04T03:31:31Z

Hey!
Taking up /editor/content/preview/index in PR #2638 .

Thank you.

chinmayhem · 2019-10-04T05:30:36Z

Hey!
Took up /app/pages/Sandbox/Editor/Header/CollectionInfo/index.js in PR #2639

Thank you.

chinmayhem · 2019-10-04T08:33:17Z

Hello!
Took up /Sandbox/Editor/Header/Header.tsx in PR #2644

Thank you.

yeion7 · 2019-10-04T11:41:23Z

I will be working with /app/pages/Dashboard/Content/Sandboxes/Filters/SortOptions/index.js

NabeelahY · 2019-10-04T11:52:40Z

Hi 👋🏽
I'll like to try to refactor /app/pages/common/Modals/Changelog/Dashboard/index.js

sakthivel-tw · 2019-10-04T12:28:11Z

Hello,
Took /app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx and PR is #2650

iwgx · 2019-10-04T16:18:54Z

Hi, I'm interested for /app/pages/CliInstructions/index.tsx

NileshPatel17 · 2019-10-04T16:42:04Z

Hi,
Took /app/pages/Patron/PricingModal/PricingChoice/ChangeSubscription/index.tsx, PR #2654

NileshPatel17 · 2019-10-04T17:33:53Z

Hey! PR #2655 refactors /app/pages/Sandbox/SignOutNoticeModal/index.js

kiliman · 2019-10-21T13:46:34Z

Updated checklist #2621 (comment)

yevhenorlov · 2019-10-22T06:28:15Z

PR for /app/pages/Dashboard/Content/routes/RecentSandboxes/index.js: #2893

I'll take /app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js next.

UPD: PR for /app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js #2906

yevhenorlov · 2019-10-22T09:26:05Z

Starting /app/pages/Sandbox/Editor/Workspace/Chat/index.js

Tarektouati · 2019-10-22T11:30:19Z

Hi. I'd like to refactor this one /app/pages/Profile/Showcase/index.js

yevhenorlov · 2019-10-23T11:36:06Z

PR for /app/pages/Sandbox/Editor/Workspace/Chat/index.js is here: #2910
It's a work in progress (Typescript got the best of me for now), would appreciate feedback 😉

22PoojaGaur · 2019-10-23T21:54:23Z

Hi, I am taking up /app/pages/common/Modals/PreferencesModal/Experiments/index.tsx

mdsadiq · 2019-10-23T22:09:18Z

i am taking up pages/NewSandbox/index.js

mdsadiq · 2019-10-23T22:27:27Z

I am taking up /pages/Profile/Showcase/index.js

22PoojaGaur · 2019-10-23T22:46:17Z

Please review #2918
@Saeris and @christianalfoni

22PoojaGaur · 2019-10-23T22:48:13Z

Meanwhile I am taking /app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js

sajadhsm · 2019-10-24T13:18:34Z

PR [#2922] for /app/pages/common/Modals/DeploymentModal/index.js
(Since no activity was done by its claimer for a long time)

kiliman · 2019-10-24T13:32:43Z

Updated checklist #2621 (comment)

Tarektouati · 2019-10-25T12:14:10Z

PR[#2926] for /app/pages/Profile/Showcase/index.js is ready, need review

nguanh · 2019-10-25T18:46:10Z

Hi
I would like to claim
/app/pages/Sandbox/Editor/index.js

jhsu · 2019-10-25T20:52:42Z

it looks like some components are already refactored and using overmind:

/app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.js (is now /app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.tsx)
/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx

kiliman · 2019-10-25T21:50:38Z

Updated checklist #2621 (comment)

@Tarektouati /app/pages/Profile/Showcase/index.js (existing PR #2766)

@22PoojaGaur /app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js (existing PR #2769)

@nguanh /app/pages/Sandbox/Editor/index.js added claim

@jhsu /app/pages/Sandbox/Editor/Workspace/Dependencies/AddVersion/index.js (Completed #2768)
/app/pages/Sandbox/Editor/Header/SandboxName/SandboxName.tsx (Completed #2544)

Avi98 · 2019-10-25T22:18:55Z

Hi i can work on /app/pages/Dashboard/Content/SandboxGrid/index.js

Tarektouati · 2019-10-29T14:11:12Z

@kiliman my PR #2926 passed all checks and is ready to be merged instead of #2766

ivandevp · 2019-10-29T15:17:24Z

Hey @kiliman! My PR is ready for review/merge #2860, too.

kiliman · 2019-10-29T15:33:57Z

@Tarektouati and @ivandevp

I'm not part of the codesandbox team. I was simply trying to help manage the checklist so people would know what was already done/being worked on.

I believe the team is working on reviewing the PRs this week. They stated they will process them in PR order, so if you worked on a PR that's already been submitted, they may close yours (assuming the initial PR was fine).

Anyway, good luck to you all. Happy #HacktoberFest 🎃

Saeris pinned this issue Oct 3, 2019

Saeris added Hacktoberfest ❕ Help Wanted 🔰 Beginner Friendly labels Oct 3, 2019

indifferentghost mentioned this issue Oct 3, 2019

🔨 Refactored app/pages/CLI/index.tsx #2623

Merged

4 tasks

chinmayhem mentioned this issue Oct 3, 2019

🔨 Refactored 🧠 Overmind Hacktober | app/pages/index.tsx : refactor to replace Cerebral with Overmind #2630

Merged

4 tasks

vanya829 mentioned this issue Oct 3, 2019

🔨 Switch LikeHeart to use useOvermind #2635

Merged

4 tasks

chinmayhem mentioned this issue Oct 4, 2019

🔨 Refactored 🧠 Overmind : /editor/content/preview/index to replace Cerebral with Overmind #2638

Closed

4 tasks

chinmayhem mentioned this issue Oct 4, 2019

🔨 Refactored 🧠 Overmind Hacktober /pages/Sandbox/Editor/Header/CollectionInfo/index.js converted TS and uses Overmind #2639

Merged

4 tasks

chinmayhem mentioned this issue Oct 4, 2019

🔨 Refactored 🧠 Overmind Hacktober | /Sandbox/Editor/Header/Header.tsx : refactor to replace Cerebral with Overmind #2644

Merged

4 tasks

sakthivel-tw mentioned this issue Oct 4, 2019

🔨 Refactored 🧠 Overmind Hacktober | /app/pages/Dashboard/Content/Sandboxes/Filters/FilterOptions/index.tsx : refactor to replace Cerebral with Overmind #2650

Merged

4 tasks

iwgx mentioned this issue Oct 4, 2019

🔨 Refactored 🧠 Overmind Hacktober | /app/pages/CliInstructions/index.tsx : refactor to replace Cerebral with Overmind #2656

Merged

4 tasks

nobioma1 mentioned this issue Oct 4, 2019

🔨Refactor /app/pages/GitHub/index.js #2657

Merged

4 tasks

Avi98 mentioned this issue Oct 21, 2019

🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/common/Modals/index.js #2902

Merged

2 tasks

yevhenorlov mentioned this issue Oct 22, 2019

🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js to use Overmind, Typescript, and Apollo hooks #2906

Merged

4 tasks

yevhenorlov mentioned this issue Oct 23, 2019

🔨 Refactor, 🧠 Overmind Hactoberfest | Refactor /app/pages/Sandbox/Editor/Workspace/Chat/index.js to use Overmind and Typescript #2910

Merged

4 tasks

22PoojaGaur mentioned this issue Oct 23, 2019

🔨 Refactor, 🧠 Overmind and hacktoberfest | changes done for app/pages/common/Modals/PreferencesModal/Experiments/index.tsx #2918

Merged

3 tasks

sajadhsm mentioned this issue Oct 24, 2019

🔨 Refactor, 🧠 Overmind | /app/pages/common/Modals/DeploymentModal/index.js #2922

Merged

4 tasks

Tarektouati mentioned this issue Oct 24, 2019

🔨 Refactor, 🧠 Overmind, Showcase Component /app/pages/Profile/Showcase/index.js #2926

Closed

4 tasks

22PoojaGaur mentioned this issue Oct 25, 2019

🔨 Refactor, 🧠 Overmind and hacktoberfest | changes added for /app/pages/Sandbox/Editor/Workspace/OpenedTabs/index.js #2927

Closed

4 tasks

Saeris changed the title ~~Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox!~~ [Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! Oct 26, 2019

MichaelDeBoey closed this as completed Nov 5, 2019

garethx unpinned this issue Nov 7, 2019

[Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! #2621

[Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! #2621

Saeris commented Oct 3, 2019 •

edited by MichaelDeBoey

jyash97 commented Oct 3, 2019

ShahAnuj2610 commented Oct 3, 2019

indifferentghost commented Oct 3, 2019

hauze-v commented Oct 3, 2019

chinmayhem commented Oct 3, 2019

vanya829 commented Oct 3, 2019

chinmayhem commented Oct 4, 2019 •

edited

chinmayhem commented Oct 4, 2019

chinmayhem commented Oct 4, 2019

yeion7 commented Oct 4, 2019

NabeelahY commented Oct 4, 2019

sakthivel-tw commented Oct 4, 2019

iwgx commented Oct 4, 2019

NileshPatel17 commented Oct 4, 2019 •

edited

NileshPatel17 commented Oct 4, 2019

kiliman commented Oct 21, 2019

yevhenorlov commented Oct 22, 2019 •

edited

yevhenorlov commented Oct 22, 2019

Tarektouati commented Oct 22, 2019 •

edited

yevhenorlov commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

mdsadiq commented Oct 23, 2019

mdsadiq commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

sajadhsm commented Oct 24, 2019

kiliman commented Oct 24, 2019

Tarektouati commented Oct 25, 2019

nguanh commented Oct 25, 2019

jhsu commented Oct 25, 2019

kiliman commented Oct 25, 2019

Avi98 commented Oct 25, 2019 •

edited

Tarektouati commented Oct 29, 2019

ivandevp commented Oct 29, 2019

kiliman commented Oct 29, 2019

[Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! #2621

[Submissions Closed] Participating in #HacktoberFest? Here's some beginner friendly ways to contribute to CodeSandbox! #2621

Comments

Saeris commented Oct 3, 2019 • edited by MichaelDeBoey

About the Event

Contributing

Components to be refactored:

Best Practices and Style Guide

Other Quick Wins

Thanks and Happy Hacking!

jyash97 commented Oct 3, 2019

ShahAnuj2610 commented Oct 3, 2019

indifferentghost commented Oct 3, 2019

hauze-v commented Oct 3, 2019

chinmayhem commented Oct 3, 2019

vanya829 commented Oct 3, 2019

chinmayhem commented Oct 4, 2019 • edited

chinmayhem commented Oct 4, 2019

chinmayhem commented Oct 4, 2019

yeion7 commented Oct 4, 2019

NabeelahY commented Oct 4, 2019

sakthivel-tw commented Oct 4, 2019

iwgx commented Oct 4, 2019

NileshPatel17 commented Oct 4, 2019 • edited

NileshPatel17 commented Oct 4, 2019

kiliman commented Oct 21, 2019

yevhenorlov commented Oct 22, 2019 • edited

yevhenorlov commented Oct 22, 2019

Tarektouati commented Oct 22, 2019 • edited

yevhenorlov commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

mdsadiq commented Oct 23, 2019

mdsadiq commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

22PoojaGaur commented Oct 23, 2019

sajadhsm commented Oct 24, 2019

kiliman commented Oct 24, 2019

Tarektouati commented Oct 25, 2019

nguanh commented Oct 25, 2019

jhsu commented Oct 25, 2019

kiliman commented Oct 25, 2019

Avi98 commented Oct 25, 2019 • edited

Tarektouati commented Oct 29, 2019

ivandevp commented Oct 29, 2019

kiliman commented Oct 29, 2019

Saeris commented Oct 3, 2019 •

edited by MichaelDeBoey

chinmayhem commented Oct 4, 2019 •

edited

NileshPatel17 commented Oct 4, 2019 •

edited

yevhenorlov commented Oct 22, 2019 •

edited

Tarektouati commented Oct 22, 2019 •

edited

Avi98 commented Oct 25, 2019 •

edited