layerx-labs/dehouse-landing-page

DeHouse Landing Website

📸 Find more screenshots here

📣 Introduction

This project is a proposal to the DeHouse Website + CMS bounty on Bepro Network website where the goal is to create a dynamic and user-friendly website with a simple content management system (CMS) to manage multiple co-working space locations and community events, and based on a specific design.

🚀 Quick start

First, we need to setup the environment and install the dependencies (like Apollo and Keystone):

# .env
NEXT_PUBLIC_APP_URL='http://localhost:3000'
ASSET_BASE_URL='http://localhost:3000'
KEYSTONE_PORT=5000
SESSION_SECRET=12345678901234567890123456789012
SESSION_MAX_AGE=2592000
KEYSTONE_API_URL='http://localhost:5000/api/graphql'
DATABASE_URL=postgresql://***
AVAILABILITY_FORM_URL='https://dehouse-form-url.com'

npm install

And then we only need to fire up the project:

npx keystone dev # to fireup the CMS powered by Keystone
npm run dev # to fireup the website

Now you can access the app through these links:

• Apollo Server: http://localhost:5000/api/graphql
• Keystone CMS: http://localhost:5000
• Frontend: http://localhost:3000

⚠️ Remember to add some events, locations, and testimonials on CMS first. Or you can use this database dump that already contains some real and dummy data.

📂 App structure

.
├── app
│   ├── components
|   │   ├── ...
|   │   ├── ui
|   │   │   ├── button-link
|   │   │   ├── icons
|   │   │   ├── panel
|   │   │   ├── section
│   ├── global.css
│   ├── layout.tsx
│   └── page.tsx
├── graphql
│   ├── queries.ts
├── lib
│   └── client.ts
├── public
│   └── ...
├── utils
│   └── brands.tsx
├── auth.ts
├── keystone.ts
├── next.config.js
├── package.json
├── schema.graphql
├── schema.prisma
├── schema.ts
└── tsconfig.json

💅 Styling

The project is made with CSS Modules and support design tokens through the app/globals.css file divided into multiple sections, like:

• Colors
• Layout
• Misc
• Typography
• Buttons
• Nav
• Panels
• Benefits
• Testimonials
• Footer

The project is ready to support multiple themes, like light and dark modes, through the design tokens and easily created with this code:

<!-- app/layout.tsx -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

/* app/globals.css */
@media (prefers-color-scheme: light) {
  :root {
    --white: #ffffff;
    --black: #000000;
    --grey50: #f1f1f3;
    ...
  }
}

📦 Database

The database has three tables:

1. Users → users that have access to the CMS
2. Events → events that appear on the agenda section (image, ane, date, description, website, and option to show or not on the landing page)
3. Locations → spaces that appear on the locations section (image, name, address, description, amenities)
4. Testimonials → messages from clients and partners (avatar, name, message, Twitter, and an option to show or not on the landing page)

dehouse-landing-page's Issues

DeHouse landing website

DeHouse Landing Website ☀

​DeHouse is a joint venture between Work-In and TAIKAI to create the first web3 hub in Portugal. 🇵🇹

Our dream is for it to become the physical intersection of the local web3 community. 🤝

An informal and dynamic space exclusively dedicated to the ecosystem of web3 organizations. The objective is to create a great vibe and flexible environment with a decentralized workspace, to enhance a positive work culture. A space with a strong sense of community, where everything can be co-developed, co-created, and co-shared. The place where we can meet people with the same interests, generate and discuss new ideas, creating synergies. Gather the right tools to ensure greater productivity in our work, an efficient network, and the perfect work/life balance.

TAIKAI, the leading partner's partner, is calling all the community to contribute to this project and proposing a landing page as the main homepage for this community-based initiative.

As a starting point, we are providing information, logos, and office photos that can be used to enrich and enhance the website's appearance.

Website layout required

• Heroe (project presentation)
• Services provided
• Pricing talks about packs
• Contact section and co-work address, etc.
• Footer with important links (social websites)

All the typography should use the Space Grotesk font available on the TAIKAI press kit.

The DeHouse landing page bounty is taking place on Bepro Network.

Resources

• Building DeHouse: New Web3 Hub in Portugal
• Work-In DeHouse
• TAIKAI press kit
• Logos Work-In
• Photo Box

To get additional information about this initiative, please email us at [email protected].

Deliverables

• A static website built in node.js, next.js, react, angular, Framer, or Webflow.
• Instructions on how to build and run the website
• Documentation about any third-party tools used to deliver the project.

Reward 🤑

1,500,000 BEPRO for the best landing page

DeHouse Website + CMS (Content Management System)

What is DeHouse

​DeHouse is a joint venture between Work-In and LayerX to create the first web3 hub in Portugal. 🇵🇹

Our dream is for it to become the physical intersection of the local web3 community. 🤝

An informal and dynamic space exclusively dedicated to the ecosystem of web3 organizations. The objective is to create a great vibe and flexible environment with a decentralized workspace, to enhance a positive work culture. A space with a strong sense of community, where everything can be co-developed, co-created, and co-shared. The place where we can meet people with the same interests, generate and discuss new ideas, creating synergies. Gather the right tools to ensure greater productivity in our work, an efficient network, and the perfect work/life balance.

Goal

The goal of this bounty is to create a dynamic and user-friendly website with a simple content management system (CMS) to manage multiple co-working space locations and community events. This project aims to provide an interactive platform that enables seamless management of co-working spaces and facilitates community engagement through event organization and promotion.

The layout should follow the next Figma File:

https://www.figma.com/file/ZG39TvO2mD2JorCMUlZYUW/DeHouse---Landing-Page---June-2023?type=design&node-id=0%3A1&t=IhJwy7nBf9b2H0tl-1

Project Requirements:

• Front-End Development: The website should be built using React.js, ensuring a modern and responsive user interface (UI) design.
• Location Management: Implement a CMS to manage co-working space locations. This includes the ability to add, edit, and delete locations, along with relevant details such as address, amenities, pricing, and availability.
• Event Management: Develop a feature to organize and showcase community events hosted at the co-working spaces. The CMS should allow for creating, editing, and removing events, along with event descriptions, dates, times and link to external event website
• User Authentication: Implement user authentication and authorization mechanisms to control access to CMS functionalities, ensuring only authorized individuals can make changes to the locations and events.
• Responsive Design: Ensure the website is mobile-friendly and provides an optimal experience across different devices and screen sizes.
• Integration(Optional): Integrate any necessary APIs or libraries for enhanced functionality, such as mapping services for location visualization, event registration platforms, or notification systems.
• Documentation: Provide comprehensive documentation that outlines the project's architecture, functionalities, and usage instructions.

Deliverables:

• A fully functional React.js website with a responsive UI.
• CMS functionalities to manage co-working space locations and community events implemented in Node.js or using free CMS headless frameworks like Keystone.JS, …
• User authentication and authorization system.
• Search and filtering capabilities for locations and events.
• Integration of relevant APIs or libraries.
• Comprehensive project documentation.

Happy Hacking 🧑‍💻👩‍💻

DeHouse landing website

DeHouse Landing Website ☀

​DeHouse is a joint venture between Work-In and TAIKAI to create the first web3 hub in Portugal. 🇵🇹

Our dream is for it to become the physical intersection of the local web3 community. 🤝

An informal and dynamic space exclusively dedicated to the ecosystem of web3 organizations. The objective is to create a great vibe and flexible environment with a decentralized workspace, to enhance a positive work culture. A space with a strong sense of community, where everything can be co-developed, co-created, and co-shared. The place where we can meet people with the same interests, generate and discuss new ideas, creating synergies. Gather the right tools to ensure greater productivity in our work, an efficient network, and the perfect work/life balance.

TAIKAI, the leading partner's partner, is calling all the community to contribute to this project and proposing a landing page as the main homepage for this community-based initiative.

As a starting point, we are providing information, logos, and office photos that can be used to enrich and enhance the website's appearance.

Website layout required

• Heroe (project presentation)
• Services provided
• Pricing talks about packs
• Contact section and co-work address, etc.
• Footer with important links (social websites)

All the typography should use the Space Grotesk font available on the TAIKAI press kit.

The DeHouse landing page bounty is taking place on Bepro Network.

Resources

• Building DeHouse: New Web3 Hub in Portugal
• Work-In DeHouse
• TAIKAI press kit
• Logos Work-In
• Photo Box

To get additional information about this initiative, please email us at [email protected].

Deliverables

• A static website built in node.js, next.js, react, angular, Framer, or Webflow.
• Instructions on how to build and run the website
• Documentation about any third-party tools used to deliver the project.

Reward 🤑

1,500,000 BEPRO for the best landing page