Frontend design

[webcrumbs-community]

Discussions about the basic features and frontend decisions.

[webcrumbs-community]

To start the discussion. Wordpress adds an admin panel to every website using it. The admin panel itself is extendable by plugins. It serves as a control for frontend elements. In very basic configurations, it looks like this:

[webcrumbs-community]

Hello, my friend.

Thanks for joining! 💪

Great questions. Let's dive into them.

Vite or Nextjs: I see Vite has its advantages, on building fast tools and working not only with React but other frameworks as well. I'd still go with Nextjs for two important reasons: larger community and SEO. If you see any specific disadvantage of Nextjs, let's dive further.

Javascript of Typescript: there are the reasons we've mentioned before, but I'm interested in understanding further your thoughts on how typescript would make plugins easier. Could you elaborate?

🌟

[yessur3808]

Regarding NextJs your reasoning is great and I agree.

However I think for a complex project like a WordPress-like tool TypeScript might be a better choice because of its type safety and other advanced features like interfaces and generics that can help manage complexity and maintain large codebases.

In terms of specifically plugins or add-ons typescript has the type safety that reduces any runtime errors. providing type definitions where developers are interfacing with your application's API.

type definitions can serve as a documentation as well making it easier to understand certain operations.

the only con in using Typescript I see is the extra compilation step needed

[webcrumbs-community]

Thank you, @yessur3808. I'm pretty convinced of TS now. @dshaw0004 agree?

[dshaw0004]

@webcrumbs-community I was agreeing from the beginning. I don't have much experience of next. I only use it only and that was with typescript.

[webcrumbs-community]

Key! Typescript it is.
Cheers

[webcrumbs-community]

We have the opportunity to think differently here. Perhaps in terms of departments within a company that usually influence the website. It's too much to begin with, but a list of departments, to keep in mind (thanks to GPT4):

Development:

1. Front-End Development: Implementing the visual elements that users interact with.
2. Back-End Development: Building the server, database, and application logic that power the website's functions.
3. DevOps: Ensuring the technical infrastructure is in place, handling deployments, monitoring website performance, and scaling resources as necessary.
4. QA (Quality Assurance): Testing the website for bugs, performance issues, and other quality metrics.

Marketing:

1. Content Creation: Writing blog posts, articles, and other textual content for the website.
2. SEO (Search Engine Optimization): Optimize the website for search engines to improve visibility.
3. Analytics: Monitoring website traffic, user behavior, and other metrics.
4. Campaign Management: Running promotional campaigns that might include landing pages on the website.

Design:

1. UI/UX Design: Creating the user interface and improving the user experience.
2. Graphic Design: Creating visual elements like logos, banners, and illustrations.
3. Wireframing and Prototyping: Sketching the initial design and functionality of new website pages or features.

Product Management:

1. Feature Planning: Deciding which features to build or improve upon.
2. Roadmapping: Planning the development lifecycle and coordinating between departments.
3. Usability Testing: Conducting tests to understand how users interact with the website and what can be improved.

Customer Support:

1. FAQs and Knowledge Bases: Creating and updating self-help resources on the website.
2. Live Chat: Managing real-time support directly through the website.
3. Feedback Collection: Collecting and analyzing customer feedback for website improvements.

Sales:

1. Lead Generation: Using the website to capture sales leads.
2. Demo Pages: Creating or managing product demo pages or platforms accessible through the website.
3. Pricing Pages: Managing and updating pricing information on the website.

Legal:

1. Compliance: Ensuring the website meets legal standards like GDPR, CCPA, or ADA.
2. Terms and Conditions: Drafting and updating the website’s terms of service and privacy policy.

IT Security:

1. Security Audits: Regularly auditing website for security vulnerabilities.
2. Data Protection: Ensuring encryption and other security measures are in place to protect user data.
3. Incident Response: Responding to any security incidents affecting the website.

Human Resources:

1. Careers Page: Updating and managing the careers/jobs section of the website.
2. Employee Portals: If applicable, maintaining internal website portals for employee use.

Finance:

1. Payment Gateway: If the website involves transactions, ensuring secure and effective payment processing.
2. Subscription Management: Overseeing subscription-based features or services on the website.

Internal Communications:

1. Intranet: If the company has an internal website or portal for employees, this department would be responsible for its upkeep.

[webcrumbs-community]

Not everything needs to be at the core. It should only be expandable by plugins, as the community seem fit. That's the beauty of it.

The basics seem to rely on a Design System (theme), Plugins, Content Management, Authentication... what else?

[webcrumbs-community]

Onboarding

[dshaw0004]

can you please create the project structure and create a next app

I am thinking about doing this

root
|
|- frontend (next app)
|- backend

this structure is great if you don't want to create the backend in next

[webcrumbs-community]

There it is, my friend. I created it as "admin". In my profile you'll see other 3 repos I've been playing with, that should work as other parts of the project.

Please feel free to PR.
Cheers

[mnkhod]

Hey guys just wanted to share my opinion. I been studying react folder structure methodologies/patterns and through my research this articles explains most of the patterns. "Atomic Design" felt super organized but i think for an open source project like this "Feature-Based" pattern seems like the perfect choice.

my-react-app/
├── src/
│   ├── features/
│   │   ├── feature-a/
│   │   │   ├── components/
│   │   │   │   ├── ComponentA1/
│   │   │   │   └── ComponentA2/
│   │   │   ├── hooks/
│   │   │   ├── services/
│   │   │   ├── store/
│   │   │   └── index.js
│   │   └── feature-b/
│   │       ├── components/
│   │       │   ├── ComponentB1/
│   │       │   └── ComponentB2/
│   │       ├── hooks/
│   │       ├── services/
│   │       ├── store/
│   │       └── index.js
│   ├── shared/
│   │   ├── components/
│   │   │   ├── Button/
│   │   │   ├── Input/
│   │   │   └── Navbar/
│   │   ├── hooks/
│   │   ├── services/
│   │   └── utils/
│   ├── app/
│   │   ├── App.js
│   │   └── App.scss
│   ├── index.js
│   ├── index.scss
│   └── reportWebVitals.js
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── .env
├── .eslintrc
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
└── yarn.lock

Article : https://itnext.io/top-6-best-folder-structures-for-react-ultimate-comparison-effc29ae5045

[webcrumbs-community]

Hello, mate!

Welcome aboard.

I like your suggestion.

I'll let the others comment too.

Cheers!

🏖️