Quality & Technical Requirements
Themes Item Preparation & Technical Requirements
- Imagine and wire frame a design. Decide if you are designing for a particular audience (restaurants, or hotels, or artist’s portfolios…) or if you are going for a more general template. The other option is to take inpiration from a website or template. Check out the Latest Design Trends.
- Once you are happy with the design, create the site! Be meticulous with your code, comment everything so it’s extremely readable and clear, and format everything properly.
- Fill your site with good looking filler text content. You can use Lorem Ipsum, but in the places where text is highly visible, you should write the content yourself so it is personally applicable to the site you made.
- Donot use copyrighted images, etc. For Oper Source Images, Video, etc. check this link.
- Create a simple read-me on how to replace content in your site and host it with a popular web host like Vercel. Include an affiliate links!
- Organize your file and documentation so that it is easy to view, edit and understand. Group, label and organize common elements so that buyers are able to easily edit your file. The more editable your file is, the more valuable it is to buyers.
- Ensure that your code is validated and in a style that represents the latest and best practices in the industry.
- Our main selling point is that we are building Full-Stack Strongly and Fully Typed Easily Customizable Responsive Accessible Web2 and Web3 Templates. To understand the concept read these articles:
- All our templates will use the following tech stack:
- Our Programming Language is TypeScript (Version 4.9+)
- Our Full-Stack Web Platform is Next.js (Version 12.3+). Practice projects available here.
- Our component library is Chakra UI (Version 2.3.6+)
- For minor animation Framer-Motion (Version 2.3+)
- To develop simple API integrated with Next.js we will use API Routes with tRPC (Version 10+)
- For Database Access we will use Prisma (Version 4.5+). It will be used to access data in Next.js API Routes.
- For Database we can use anything because Prisma supports these databases. However, for local development we will use SQLite which is shipped with every Prisma release. For cloud deployment we will use CockroachDB serverless, it has Vercel integration
- For Headless CMS we will use Contentful and Strapi. But currently Strapi does not support deployment and import/export.
- Ethers for Ethereum integration (Version 5.7+)
- For Smart Contracts we will use Solidity (Version 0.8.17+) with Hardhat (Version 2.12+)
- For Quick Deployment we will use Vercel with CLI
- Each template must have documentation for the user.
- Have two versions with seprate directories: a. plain site b. with Contentful integrated (Headless CMS)
- The Contentful version should export files: https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/
- Have the ability to change colors from the central place https://chakra-ui.com/docs/styled-system/theme
- Must implement reponsive sytles https://chakra-ui.com/docs/styled-system/responsive-styles Please test your template with all these breakpoints (The inspect element on the browsers have these breakpoints built in, use it to test):
- 320px - Mobile S
- 375px - Mobile M
- 425px - Mobile L
- 768px - Tablet
- 1024px - Laptop
- 1440px - Laptop L
- 2560px - 4K
- If appropriate make you Website an PWA
- Our directory structure will be as follows:
readme.md
TailwindCSS
reamdme.md
noCMS
readme.md
project files
Contentful
readme.md
project files
Strapi
readme.md
project files
ChakraUI
reamdme.md
noCMS
readme.md
project files
Contentful
readme.md
project files
Strapi
readme.md
project files
- Create template on chakra & next 12
- Get approval from sir Zeeshan and miss Hira for UI
- Get approval from sir Zeeshan and miss Hira for contentful model
- Create template on tailwind and next 13
- Get approval from sir Zeeshan and miss Hira
- Add documentation for the template
- Get approval from Sir Zia