Are you using ARc? Please, read this.

[diegohaz]

ARc is _{the result of} a failure

Don't get me wrong. I'll speak more deeply about it in the near future, in a blog post. In short, ARc exists because I failed on another project: I had a 3 months deadline, but I spent so much time dedicating myself to the code, refactoring it and researching approaches in pursuit of the best possible structure that I ended up with no project at all, that was just an ugly page with a list of images.

The goal was presenting that to investors. I had nothing to present, so I didn't get the investment.

^{Just change wine for caipirinha and that was me.}

So I looked to all that code and thought "I failed, but someone could use it to make something great". After wiping away tears, I made the code more generic and pushed ARc's Initial commit.

Now, 8 months later, I'm sure that my "failure" has helped many other projects to succeed. I usually search for ARc based projects on GitHub. As of now, it shows more than 100 projects based on ARc, but those are just some of the public repositories on GitHub.

So, if you are using ARc, even just a part of it, please share your project, code (if public), experience or whatever you find relevant in this thread.

Thank you, guys.

[diegohaz]

cc/ @kybarg @Optissimum @santino @osdevisnot @protoEvangelion @ssmolinski9 @0xsven @prabhatsharma @dennisbochen @steven-haddix

[protoEvangelion]

@diegohaz Made this tradeshow floorplan app for my work: https://aoatradeshow.herokuapp.com/la

It's not super sophisticated, but was a breath of fresh air using atomic design and your awesome yeoman component generator! Thank you thank you thank you 🥇

https://github.com/protoEvangelion/interactiveTradeFloor

[kybarg]

@diegohaz Thank you for this wonderful project 👍 I find this most suitable for my project I'm working on currently and will be glad to share it with community as it is ready 😄 Hope to finish in a month

[steven-haddix]

@diegohaz I started taking a look at ARc about 9 months ago before starting to architect Wendy's New Menu Site. Atomic design along with several other ARc project patterns have made the project a clean and easy to reason about application. I wouldn't hesitate to pass the project along to the next developer.

We're currently in process of resigning several other Wendy's pages with a similar pattern/architecture.

A few of the patterns/tools we to advantage of:

• Atomic Design
• Dynamic requires for both components and Redux stores
• Storybook
• Redux/Sagas
• Styled Components
• Super Awesome Webpack Plugin (shameless plug for my static site generator 😉 )

Edit: The menu redesign includes everything between the header and footer. Those are on the roadmap 😄

[Geczy]

Thanking @diegohaz , the company I'm working at wanted to use ReactJS with Atomic design and this project fit that glove perfectly. With constant improvements to things like the resource module and react router 4, i'm happy this project is still alive!

We've integrated

• e2e testing: https://github.com/mucsi96/nightwatch-cucumber/
• auth0 https://auth0.com
• bootstrap 4 https://v4-alpha.getbootstrap.com
• beefree https://beefree.io
• dotenv
• prettier

Would share my code if possible but it's a private repo!

[RXminuS]

@Geczy Why would you integrate bootstrap 4 with something as beautiful as Arc? Doesn't that defeat the purpose, or do you use things like styled.card-headingseverywhere?

But anyways...AMAZING project! We'll 4 sure be sharing some stuff we've built using your hard work. Also doing a Medium post on it!

[ghalex]

@diegohaz First thank you for this awesome project. I am using ARc with MobX (better alternative for state management then redux) for my startup Coderbox. I cannot share my code but I made for myself a public starter kit that I use for all other projects:
https://github.com/coderboxapp/react-mobx-starter-kit

The only change as you can see is that I have pages & containers outside of components directory. This is important if you use a framework like NextJS were you have to have your pages in a specific directory.

[mininternet]

@ghalex - I also am using Arc with MobX (think is difficult to say MobX is a better alternative than Redux - I've used both and can see the benefits of each approach), but I'm not sure if @diegohaz has any interest in having a new Arc MobX repo?

Either way, thanks again for all the hard work.

[Geczy]

You can always open a PR with mobx :)

[ghalex]

@mininternet I think you are right, I didn't choose my words correctly :). Saying it is a better alternative is maybe too strong of an opinion. Both have their benefits.

As for ARc I think it will be nice if @diegohaz can add a MobX branch

[Geczy]

Also, redux 7.0 just released with Flow static type checking

https://github.com/erikras/redux-form/releases

[orther]

We're currently doing a lot of refactoring/cleanup to be more inline with ARc to solve the majority of our pain points we've encountered... The current active site being www.soworganic.com (only accessible by customers) and soon to be another large project. Basically ARc has been a great reference to find solutions to pieces of our react/redux/redux-saga app that we couldn't find elegant solutions for. Much appreciate!

[velopert]

I created a project using ARc. I really had fun working on it.

I did not fork this project directly. I just copied your idea of using require with regex, and categorizing components to atom / molecule / organism, etc.

My project is https://bitimulate.com/
Github Repo: https://github.com/velopert/bitimulate

It is a cryptocurrency simulated trading system that relies on polniex's realtime data.

This architecture is really brilliant. It makes development very comfortable. I will use this architecture again later on when I work on some small projects. However, I am not going to use ARc when I work on bigger projects (which needs team collaboration) due to reasons below:

1. It is really hard to implement code-splitting. I think the only way to resolve this is making a babel plugin.
2. I am using VSCode, and it does not redirect to the component file when I press Command + Click. It should open the linked file, but it does not work since it uses regex require. Which is very! sad

I hope this problems will resolve someday...

[vegeta897]

It would be wrong of me to end tonight without sharing my appreciation here. Sorry if this gets ramble-y. I have no idea how beginner-friendly you realize or intend this kit to be, but reading these other comments, I can tell that my overall dev-experience is minimal in comparison. There's your headline, "Noobie developer manages to successfully deploy starter kit featuring technologies and methods he only learned about days previous!"

I started creating a small audio clip sharing site earlier this week. It's my third-ever react project (the first being very unfinished, the second being dead simple, and both only static/client-side), so I have been struggling to find the right boilerplate/starter kit. I eventually worked out that I needed a full stack react+redux+thunk/saga+router+webpack+express+ssr with live reloading for development, but I didn't realize all that at the start. I wanted all the major libraries to be the latest versions.

I made decent headway the first couple days, getting a basic but working prototype up, before discovering I really wanted SSR (for crawlers, at first) and that my webpack-dev-server config wasn't going to work for a single server providing the site and API. And forget about live reload during development! I was losing hope fast after 2 very late nights/mornings of giving up in frustration. I must have read over 50 articles, 100 stack exchange questions, and considered 10 different boilerplates in less than a week. I spent hours and hours trying to jury-rig scraps of code into my project to make it work. I did learn a heck of a lot, but my goal remained out of reach.

ARc was the answer. And as far as I'm aware, it's the only answer out there that fits my needs this well. Not only that, I was able to rewrite most of the basic client and API functionality all in one night. There were still some struggles and of course the learning curve (src-example was slightly lacking for what I needed to do; studying @velopert's project filled in some of the gaps), but I'm amazed that I was able to reach this point so quickly.

Thank you for creating, publishing, and maintaining ARc. You may well have saved my project entirely. Getting into atomic design has been exciting, and I'm eager to continue building my app.

Grateful in advance for the ongoing improvements and fixes; I hope I can offer a useful PR some day too!

[RockinRonE]

@diegohaz I currently work at The Marketing Store in Chicago. We didn't use your repo, but we setup our project in a similar fashion based of off Arc. The app is the current McDonald's "Trick Treat Win" campaign.

[sanjeevyadavIT]

Hello @diegohaz First of all thank you for creating this repo and providing extensive resources about the entire code base.

I have created a similar repo arcn for React Native based on Atomic design. It uses Redux, redux-saga, react-navigation and similar project structure as your redux branch do.

I request you to look into my code base arcn and please help to improve the code. So that people using react native can start building up on a strong foundation.

Also I have working on a eCommerce React Native app which uses atomic design under the hood.

I would really appreciate any kind of help, regarding code, documentation, website.