Skip to content
BranchesTags

Repository files navigation

EdmDCP

It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.

This website is created as a SPA(Single Page Application) with the help of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for authorization .This project is build understanding to create good structure according to the size of any app React and fetching API from server .The server side is used to create and provide API with Express - Node.js .

Technology

This SPA is created based on React .

  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)

External Elements ,Libraries Used

  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)

Features

  • This app has interesting UI

  • It is user-friendly and fully responsive according to devices .

  • User can add review and it is secure to protect their own review with the help of JWT.

  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.

  • React Router Loader is used to fetch data with API . It is easy to implement.

  • User can update and delete their review from the database.Because this website have CRUD functionality.

  • After clicking "Log in," it will redirect to a login page. 2 types of login systems Email & password login, Google login. The login page have a toggle option to go to the register page.

  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'. Yea,it's cool to get the time like that ..and I love to use 'Moment'

  • Have 404 Page

  • Storing data on MongoDB with real-time service.

  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.

server

https://github.com/Durjoy-dcp/EdmDCP-server

How to use

Live website : https://edm-dcp.web.app/

About

No description or website provided.

Topics

firebasereact-routerreactjs

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - Durjoy-dcp/EdmDCP--client · GitHub
Skip to content
BranchesTags
Repository files navigation
EdmDCP
It is a website of a edm artist who is a producer and helps other artists to produce their music with many services(sound designing, promoting artists, mixing and mastering track). It is a website that is structured for the 𝗖𝗥𝗨𝗗 system to understand.
This website is created as a SPA(Single Page Application) with the help
of React . React Router for routing system in a SPA ,Firebase for authentication and JWT for
authorization .This project is build understanding to create good structure according to the size of any app React
and fetching API from server .The server side is used to create
and provide API with Express - Node.js .
Technology
This SPA is created based on React .
  • React Router
  • Bootstrap
  • CRA
  • NPM
  • Github
  • Firebase
  • Express - Node.js (for the server side)
  • MongoDB (database)
External Elements ,Libraries Used
  • React Icons
  • react-photo-view 
  • react-moment
  • react-to-print
  • react-toastify
  • cors (server)
  • vercel (server)
  • jwt(server)
Features
  • This app has interesting UI
  • It is user-friendly and fully responsive
according to devices .
  • User can add review and it is secure to protect their own review with the help of JWT.
  • This app Load data From API and use React Router to navigate.So, Among views of various components in this application,React Router allows changing the browser URL, and keeps the UI in sync with the URL.
  • React Router Loader is used to fetch data with API . It is easy to implement.
  • User can update and delete their review from the database.Because this website have CRUD functionality.
  • After clicking "Log in," it will
redirect to a login page. 2 types of login systems Email & password login, Google login. The login page
have a toggle option to go to the register page.
  • interesting part is the time of the review shows in a good format .E.g. : '2 hours ago'.
Yea,it's cool to get the time like that ..and I love to use 'Moment'
  • Have 404 Page
  • Storing data on MongoDB with real-time service.
  • Firebase Authentication and hosting, jwt verified data fetching on Express on vercel.
server
https://github.com/Durjoy-dcp/EdmDCP-server
How to use
Live website : https://edm-dcp.web.app/
About
No description or website provided.
Topics
firebasereact-routerreactjs
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages