Skip to content

Commit 2bfb78f

Browse files
anandbaraikanandbaraik
committed
⚡ Feature-Flag
1 parent 427fbfa commit 2bfb78f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+6667
-0
lines changed

‎Feature-Flag/.codesandbox/workspace.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"responsive-preview": {
3+
"Mobile": [
4+
320,
5+
675
6+
],
7+
"Tablet": [
8+
1024,
9+
765
10+
],
11+
"Desktop": [
12+
1400,
13+
800
14+
],
15+
"Desktop HD": [
16+
1920,
17+
1080
18+
]
19+
}
20+
}

‎Feature-Flag/README.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Feature Flag
2+
3+
## Create a feature flag component in React that consumes a feature's API and conditionally renders UI based on the value of the feature. This question was asked in Atlassian's machine coding interview.
4+
5+
the task is to develop a feature flag component in React. This component will interact with a feature's API and display specific UI elements based on the feature's value. The purpose of this component is to enable or disable various UI features dynamically, depending on the user's chosen service plans in large web applications.
6+
7+
To achieve this, the React feature flag component will consume the feature's API to retrieve a list of available features. These features will be centralized, ensuring that the logic is abstracted into a single location to serve as the definitive source of truth. By utilizing the context API in React, the features will be cached, and the useContext hook will provide access to these features throughout different components in the application codebase.
8+
9+
## Tech
10+
11+
- React
12+
- Css
13+
14+
## Screenshot
15+
16+
![Feature-Flag](https://github.com/anandbaraik/mcr-questions/assets/31516195/7c96ba7a-95cd-4374-8257-97d0b37b3d4e)

‎Feature-Flag/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "feature-flag",
3+
"version": "1.0.0",
4+
"description": "",
5+
"keywords": [],
6+
"main": "src/index.js",
7+
"dependencies": {
8+
"loader-utils": "3.2.1",
9+
"react": "18.2.0",
10+
"react-dom": "18.2.0",
11+
"react-scripts": "5.0.1"
12+
},
13+
"devDependencies": {
14+
"@babel/runtime": "7.13.8",
15+
"typescript": "4.1.3"
16+
},
17+
"scripts": {
18+
"start": "react-scripts start",
19+
"build": "react-scripts build",
20+
"test": "react-scripts test --env=jsdom",
21+
"eject": "react-scripts eject"
22+
},
23+
"browserslist": [
24+
">0.2%",
25+
"not dead",
26+
"not ie <= 11",
27+
"not op_mini all"
28+
]
29+
}

‎Feature-Flag/public/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
9+
manifest.json provides metadata used when your web app is added to the
10+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
11+
-->
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
15+
Notice the use of %PUBLIC_URL% in the tags above.
16+
It will be replaced with the URL of the `public` folder during the build.
17+
Only files inside the `public` folder can be referenced from the HTML.
18+
19+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20+
work correctly both with client-side routing and a non-root public URL.
21+
Learn how to configure a non-root public URL by running `npm run build`.
22+
-->
23+
<title>React App</title>
24+
</head>
25+
26+
<body>
27+
<noscript>
28+
You need to enable JavaScript to run this app.
29+
</noscript>
30+
<div id="root"></div>
31+
<!--
32+
This HTML file is a template.
33+
If you open it directly in the browser, you will see an empty page.
34+
35+
You can add webfonts, meta tags, or analytics to this file.
36+
The build step will place the bundled scripts into the <body> tag.
37+
38+
To begin the development, run `npm start` or `yarn start`.
39+
To create a production bundle, use `npm run build` or `yarn build`.
40+
-->
41+
</body>
42+
43+
</html>

‎Feature-Flag/src/App.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Example } from "./components/Example";
2+
import { FeatureFlagProvider } from "./context/FeatureFlag";
3+
import "./styles.css";
4+
5+
export default function App() {
6+
return (
7+
<div className="App">
8+
<h1>Feature Flag</h1>
9+
<FeatureFlagProvider>
10+
<Example />
11+
</FeatureFlagProvider>
12+
</div>
13+
);
14+
}

‎Feature-Flag/src/components/Chat.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const Chat = () => {
4+
return (
5+
<div>Chat</div>
6+
)
7+
}
8+
9+
export default Chat

‎Feature-Flag/src/components/Example.jsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Chat from "./Chat";
2+
import { Feature } from "./Feature";
3+
4+
export const Example = () => {
5+
return (
6+
<>
7+
<Feature feature="isGooglePayEnabled" value={true}>
8+
<button className="google_pay">Google Pay</button>
9+
</Feature>
10+
<Feature feature="isApplePayEnabled" value={false}>
11+
<button className="apple_pay">Apple Pay</button>
12+
</Feature>
13+
<div>
14+
<Feature feature="darkMode" value={true}>
15+
in Dark Mode
16+
</Feature>
17+
</div>
18+
<div>
19+
<Feature feature="chatEnabled" value={true}>
20+
<Chat/>
21+
</Feature>
22+
</div>
23+
</>
24+
);
25+
};

‎Feature-Flag/src/components/Feature.jsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { useFeatureFlag } from "../context/FeatureFlag";
2+
3+
export const Feature = ({ feature, value, children }) => {
4+
const { features } = useFeatureFlag();
5+
return features[feature] === value ? children : null;
6+
};

‎Feature-Flag/src/context/FeatureFlag.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { createContext, useContext, useState } from "react";
2+
3+
const FeatureFlag = createContext({
4+
isGooglePayEnabled: false,
5+
isApplePayEnabled: false,
6+
darkMode: false,
7+
chatEnabled: false
8+
});
9+
10+
export const FeatureFlagProvider = ({ children }) => {
11+
const [features, setFeatures] = useState({
12+
isGooglePayEnabled: true,
13+
isApplePayEnabled: false,
14+
darkMode: true,
15+
chatEnabled: false
16+
});
17+
/*
18+
* fetch data from server & use the feature flag to
19+
* toggle features
20+
*/
21+
return (
22+
<FeatureFlag.Provider value={{ features }}>{children}</FeatureFlag.Provider>
23+
);
24+
};
25+
26+
export const useFeatureFlag = () => useContext(FeatureFlag);

‎Feature-Flag/src/index.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { StrictMode } from "react";
2+
import { createRoot } from "react-dom/client";
3+
4+
import App from "./App";
5+
6+
const rootElement = document.getElementById("root");
7+
const root = createRoot(rootElement);
8+
9+
root.render(
10+
<StrictMode>
11+
<App />
12+
</StrictMode>
13+
);

‎Feature-Flag/src/styles.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.App {
2+
font-family: sans-serif;
3+
text-align: center;
4+
}
5+
6+
button {
7+
border: 0.5rem solid transparent;
8+
border-radius: 0.5rem;
9+
cursor: pointer;
10+
margin: 0.5rem;
11+
}
12+
.google_pay {
13+
background-color: violet;
14+
}
15+
16+
.apple_pay {
17+
background-color: blueviolet;
18+
}

‎File-Explorer/.eslintrc.cjs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react-refresh/only-export-components': [
16+
'warn',
17+
{ allowConstantExport: true },
18+
],
19+
},
20+
}

‎File-Explorer/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎File-Explorer/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# File explorer
2+
3+
File explorer to browse folders & files, just like vs code.
4+
5+
## Tech
6+
7+
- React
8+
- Css
9+
10+
## Screenshot
11+
12+
![File-explorer](https://github.com/anandbaraik/mcr-questions/assets/31516195/7c953508-a4ad-4adf-9501-2062e7ca7d8a)

‎File-Explorer/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>file-explorer</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)