https://github.com/webflow/codeflow
https://github.com/webflow/codeflow
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webflow/codeflow
- Owner: webflow
- License: apache-2.0
- Created: 2025-10-03T16:34:24.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-02-05T22:26:50.000Z (3 months ago)
- Last Synced: 2026-02-06T08:41:16.080Z (3 months ago)
- Language: TypeScript
- Size: 117 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Codeflow
A specialized coding interview environment designed for structured technical assessments.
## 🎯 For Interview Candidates
If you've received this link for a technical interview, follow these steps to set up your environment:
### Quick Setup (<5 minutes)
1. **Prerequisites**
- Node.js (v14 or higher) - [Download here](https://nodejs.org/)
- npm (v6 or higher) - comes with Node.js
2. **Installation**
```bash
# Clone or extract the project to your local machine
# Open a terminal in the project directory
# Install dependencies (this may take a minute)
npm install
# Start the development server
npm start
```
3. **Access the Interview Environment**
- Once started, open your browser to: **`http://localhost:8080`**
- You should see the Codeflow interface ready for your interview
### During Your Interview
Your interviewer will provide you with a `.zip` file containing the coding challenge:
1. **Extract** the pattern's `.zip` file to your computer
2. **Drag and drop** the extracted folder into the `src/interviews` directory
3. The challenge will **automatically appear** in the interface
4. **Click on the pattern** to begin coding
#### Interface Features
- **Clean Design** - Focus on your code without distractions
- **Instructions** - Access requirements and tips anytime
- **Responsive** - Works great on any screen size
#### Your Workflow
1. Review the requirements in the Instructions panel
2. Implement your solution in the provided React component
3. Test your work as you go
4. Ask questions if you need clarification
#### Tips for Success
- **Read all instructions carefully** before starting
- **Ask questions** if requirements are unclear
- **Focus on clean, readable code** over complex solutions
- **Test your implementation** as you build
- **Think about user experience** and edge cases
**Good luck with your interview!** 🚀
---
## 👥 For Contributors & everyone else
Welcome to Codeflow! This is an open-source shell for conducting structured technical interviews where candidates can code in their own environemnt, and use the AI tools they prefer.
### What is Codeflow?
Codeflow is a React-based interview platform that provides:
- A clean, distraction-free coding environment
- Support for multiple interview patterns and challenges
- Extensible architecture for custom interview formats
### Project Structure
```
codeflow/
├── src/
│ ├── components/ # UI components
│ ├── interviews/ # Interview patterns & challenges. This directory should NOT contain interviews at the repository level.
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions
├── public/ # Static assets
└── package.json # Dependencies
```
### Getting Started
```bash
# Clone the repository
git clone git@github.com:webflow/codeflow.git
cd codeflow
# Install dependencies
npm install
# Start development server
npm start
# Build for production
npm run build
```
### Creating Interview Patterns
Interview patterns are modular challenges that can be loaded dynamically. See [src/interviews/README.md](./src/interviews/README.md) for detailed pattern creation guidelines.
### Contributing
We welcome contributions! Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines.
### License
This project is licensed under the Apache License 2.0 - see the [LICENSE](./LICENSE) file for details.
---
## 📚 Additional Resources
- [Interview Pattern Documentation](./src/interviews/README.md)
- [Contributing Guidelines](./CONTRIBUTING.md)
## 🤝 Support
For issues or questions:
- **Candidates**: Contact your interviewer or recruiting team
- **Contributors**: Open an issue on GitHub or check existing discussions